当前位置: 首页 > 编程笔记 >

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

戚高洁
2023-03-14
本文向大家介绍微信小程序实现张图片合成为一张并下载,包括了微信小程序实现张图片合成为一张并下载的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了微信小程序实现张图片合成为一张并下载的具体代码,供大家参考,具体内容如下

微信小程序海报

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) {

   }
  });
  }
 })
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍iOS实现微信分享多张图片功能,包括了iOS实现微信分享多张图片功能的使用技巧和注意事项,需要的朋友参考一下 前言 微信分享到朋友圈,可分享的类型有:文字类型、图片类型、音乐类型、视频类型和网页类型,但是我们在做图片分享的时候发现微信给的API只能分享一张图片,达不到一些APP的需求,而产品汪或者Boss想要分享多张图片,比如前段时间我做的一个APP,是电商类APP,想把商品的图片都

  • 问题内容: 我有几个映像(第3方),例如,设置mysql,设置通用的php应用程序环境,设置第3方工具。 我想制作一个Dockerfile / Docker映像,将两个映像合并,然后运行更多命令 问题答案: 您可以将它们链接起来。你可以在这里找到更多 https://github.com/docker/docker/issues/3378#issuecomment-31314906 摘自上面的链接

  • 本文向大家介绍微信小程序实现图片上传,包括了微信小程序实现图片上传的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下/p> 图片上传服务器: wxml wxss 思路很简单,多张上传的话,在 upImgs 方法回调做判断 index++ 继续调用 upImgs方法即可 以上就是本文的全部内容,希望对大家的学习有所帮助,也希

  • 问题内容: 我想使用node.js合并2张图片。或者更确切地说,我想将一个较小的图像放置在较大图像上的坐标x,y上。甚至更精确:我有一个眼镜的图像和一张脸的图像,并且我想将眼镜放在脸上。我做了一些谷歌搜索,发现了一些图像处理库,但似乎没有一个能够合并图像。 问题答案: 我用过: https://github.com/learnboost/node- canvas 做类似的事情(动态地从组件构建合成

  • 本文向大家介绍python使用PIL实现多张图片垂直合并,包括了python使用PIL实现多张图片垂直合并的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现多张图片垂直合并的具体代码,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍python实现多张图片拼接成大图,包括了python实现多张图片拼接成大图的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了python实现多张图片拼接成大图的具体代码,供大家参考,具体内容如下 上次爬取了马蜂窝的游记图片,并解决了PIL模块的导入问题,现在直奔主题吧: 前边设置了很多变量,都很直观,然后时获取图片的名称以及对需要拼接图片的数量进行检查,比如你要拼接5*