介绍
这篇文章给大家分享的是有关微信小程序怎么实现张图片合成为一张并下载的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
微信小程序实现张图片合成为一张并下载的具体内容如下
微信小程序海报
页面({/* * ,*页面的初始数据 ,*/,数据:{ ,imgUrl:“项目中图片地址,,,//图片链接 ,img: & # 39; & # 39;,//,合成后图片路径 },/* * ,*生命周期函数——监听页面加载 ,*/,onLoad: function (选项),{=,let that ; ,wx.downloadFile ({ ,,url: & # 39;线上图片地址& # 39;, 成功才能(res), {//,才能绘制背景海报到画布上 var 才能;postersize =, that.setCanvasSize(750);//动态设置画布大小 const 才能;ctx =, wx.createCanvasContext (& # 39; shareCanvas& # 39;) ctx.drawImage才能(that.data.imgUrl, 0, 0,, postersize.w,, postersize.h) var 才能;re =, wx.getSystemInfoSync (); var 才能;scale =, 750,/, 180; var 才能;width =, re.windowWidth /,规模; var 才能;height =,宽度 var 才能;leftscale =, 750,/, 480;//, 180年为离开 var 才能;left =, re.windowWidth /, leftscale; var 才能;topscale =, 750,/, 880;//, 180为最高 var 才能;top =, re.windowWidth /, topscale; ctx.drawImage才能(res.tempFilePath,,,,,,,宽度,高度) ctx.draw才能() setTimeout(才能(),=祝辞,{ ,,//,code_url =, this.canvasToTempImage (),, ,,//获取临时缓存合成照片路径,存入数据中 ,,wx.canvasToTempFilePath ({ ,,,canvasId: & # 39; shareCanvas& # 39; ,,,成功:function (res), { ,,,var tempFilePath =, res.tempFilePath; ,,,that.setData ({ ,,,img: tempFilePath ,,,}) ,,,console.log (tempFilePath) ,,}, ,,,失败:function (res), { ,,,console.log (res); ,,} ,,}); ,,},1000); ,,} ,}) , },/* * ,*生命周期函数——监听页面初次渲染完成 ,*/,onReady: function (), { , },/* * ,*生命周期函数——监听页面显示 ,*/,昂秀:function (), { , },/* * ,*生命周期函数——监听页面隐藏 ,*/,onHide: function (), { , },/* * ,*生命周期函数——监听页面卸载 ,*/onUnload:大敌;function (), { , },/* * ,*页面相关事件处理函数——监听用户下拉动作 ,*/,onPullDownRefresh: function (), { , },/* * ,*页面上拉触底事件的处理函数 ,*/,onReachBottom: function (), { , },/* * ,*用户点击右上角分享 ,*/,onShareAppMessage: function (), { , }, ,//适配不同屏幕大小的画布 ,setCanvasSize: function (宽度),{ ,var size =, {}; ,try { var 才能;res =, wx.getSystemInfoSync (); var 才能;scale =, 750,/,宽度;//不同屏幕下画布的适配比例;设计稿是750宽//才能,var scale =1 var 才能;width =, res.windowWidth /,规模; var 才能;height =, res.windowHeight /,规模;; 时间=size.w 才能;宽度; 时间=size.h 才能;高度; ,}catch (e), {//才能,Do something when catch 错误 console.log才能(“获取设备信息失败“,+,e); ,} ,return 规模; }, ,//点击图片进行预览,长按保存分享图片 ,previewImg: function (e), { ,var img =, this.data.img;=,let _this ; ,//保存二维码到相册 ,wx.saveImageToPhotosAlbum ({ img, filePath才能: ,,成功:function (res), { wx.showModal({才能 ,,,内容:& # 39;保存成功& # 39;, ,,,confirmText: & # 39;确认& # 39;, ,,,showCancel:假的, ,,,成功:function (res), { ,,} ,,}); ,,}, ,,失败:function (res), { wx.showModal({才能 ,,,内容:& # 39;保存失败& # 39;, ,,,confirmText: & # 39;确认& # 39;, ,,,showCancel:假的, ,,,成功:function (res), { ,,} ,,}); ,,} ,}) }, , })
感谢各位的阅读!关于“微信小程序怎么实现张图片合成为一张并下载”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!