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


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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
Javascript 解构赋值详情
Nov 17 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
ADODB类使用
2006/11/25 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
微信小程序 上传头像的实例详解
2017/10/27 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
Python的Django框架中的数据库配置指南
2015/07/17 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
Python实现验证码识别
2020/06/15 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
如何查看python关键字
2021/01/17 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
如何查找和删除数据库中的重复数据
2014/11/05 面试题
实习教师自我鉴定
2013/09/27 职场文书
检讨书大全
2015/01/27 职场文书
考研经验交流会策划书
2015/11/02 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
分析并发编程之LongAdder原理
2021/06/29 Java/Android
Go语言空白表示符_的实例用法
2021/07/04 Golang
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript