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


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 日期时间函数(经典+完善+实用)
May 27 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 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
2.PHP入门
2006/10/09 PHP
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
jQuery实现电梯导航模块
2020/12/22 jQuery
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
python解析xml简单示例
2019/06/21 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
python操作toml文件的示例代码
2020/11/27 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
公司年会晚宴演讲稿
2014/01/06 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
党支部评议意见
2015/06/02 职场文书
交通安全学习心得体会
2016/01/18 职场文书