微信小程序实现张图片合成为一张并下载


Posted in Javascript onJuly 16, 2019

本文实例为大家分享了微信小程序实现张图片合成为一张并下载的具体代码,供大家参考,具体内容如下

微信小程序海报

Page({

 /**
 * 页面的初始数据
 */
 data: {
 imgUrl: "项目中图片地址", //图片链接
 img: '' // 合成后图片路径
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 let that = this;
 wx.downloadFile({
  url: '线上图片地址',
  success(res) {
  // 绘制背景海报到canvas
  var postersize = that.setCanvasSize(750);//动态设置画布大小
  const ctx = wx.createCanvasContext('shareCanvas')
  ctx.drawImage(that.data.imgUrl, 0, 0, postersize.w, postersize.h)

  var re = wx.getSystemInfoSync();
  var scale = 750 / 180;
  var width = re.windowWidth / scale;
  var height = width
  var leftscale = 750 / 480; // 180为left
  var left = re.windowWidth / leftscale;
  var topscale = 750 / 880; // 180为top
  var top = re.windowWidth / topscale;
  ctx.drawImage(res.tempFilePath, left, top, width, height)
  ctx.draw()

  setTimeout(() => {
   // code_url = this.canvasToTempImage(); 
   //获取临时缓存合成照片路径,存入data中
   wx.canvasToTempFilePath({
   canvasId: 'shareCanvas',
   success: function (res) {
    var tempFilePath = res.tempFilePath;
    that.setData({
    img: tempFilePath
    })
    console.log(tempFilePath)
   },
   fail: function (res) {
    console.log(res);
   }
   });
  }, 1000);

  }
 })


 
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {
 
 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
 
 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {
 
 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {
 
 },
 //适配不同屏幕大小的canvas
 setCanvasSize: function (width) {
 var size = {};
 try {
  var res = wx.getSystemInfoSync();
  var scale = 750 / width;//不同屏幕下canvas的适配比例;设计稿是750宽
  // var scale = 1
  var width = res.windowWidth / scale;
  var height = res.windowHeight / scale;;
  size.w = width;
  size.h = height;
 } catch (e) {
  // Do something when catch error
  console.log("获取设备信息失败" + e);
 }
 return size;
 },
 //点击图片进行预览,长按保存分享图片
 previewImg: function (e) {
 var img = this.data.img;
 let _this = this;
 //保存二维码到相册

 wx.saveImageToPhotosAlbum({
  filePath: img,
  success: function (res) {
  wx.showModal({
   content: '保存成功',
   confirmText: '确认',
   showCancel: false,
   success: function (res) {

   }
  });
  },
  fail: function (res) {
  wx.showModal({
   content: '保存失败',
   confirmText: '确认',
   showCancel: false,
   success: function (res) {

   }
  });
  }
 })
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为jQuery增加join方法的实现代码
Nov 28 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
IE下通过a实现location.href 获取referer的值
Sep 04 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
JS实现的排列组合算法示例
Jul 16 #Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 #Javascript
详解微信小程序支付流程与梳理
Jul 16 #Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 #Javascript
JAVA面试题 static关键字详解
Jul 16 #Javascript
微信小程序实现下拉框功能
Jul 16 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python模块包中__init__.py文件功能分析
2016/06/14 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Pytorch之保存读取模型实例
2019/12/30 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
教师现实表现材料
2014/02/14 职场文书
大学军训感言800字
2014/02/27 职场文书
《广玉兰》教学反思
2014/04/14 职场文书