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


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与css文件的js代码
Sep 15 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 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/01/09 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
一端时间轮换的广告
2006/06/26 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
实例浅析js的this
2016/12/11 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python之os操作方法(详解)
2017/06/15 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python用post访问restful服务接口的方法
2018/12/07 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
个人求职自荐信范文
2014/06/20 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
优秀党员推荐材料
2014/12/18 职场文书
放假通知范文
2015/04/14 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android