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


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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 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创建PDF中文文档
2006/10/09 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
JS实现分页导航效果
2020/02/19 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
Django中的AutoField字段使用
2020/05/18 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
linux面试题参考答案(6)
2014/08/29 面试题
成人教育自我鉴定
2013/11/01 职场文书
供应链金融服务方案
2014/05/25 职场文书
公司活动总结怎么写
2014/06/25 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
孩子满月酒答谢词
2015/09/30 职场文书