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


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 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 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有效防止同一用户多次登录
2015/11/19 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
Python如何省略括号方法详解
2020/03/21 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
为什么python比较流行
2020/06/19 Python
appium+python自动化配置(adk、jdk、node.js)
2020/11/17 Python
财务部岗位职责
2013/11/19 职场文书
项目资料员岗位职责
2013/12/10 职场文书
化学教育专业自荐信
2014/07/04 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
老公保证书
2015/01/17 职场文书
python 实现的截屏工具
2021/05/08 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS