本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)張圖片合成為一張并下載的具體代碼,供大家參考,具體內(nèi)容如下
微信小程序海報(bào)
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { imgUrl: "項(xiàng)目中圖片地址", //圖片鏈接 img: '' // 合成后圖片路徑 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { let that = this; wx.downloadFile({ url: '線上圖片地址', success(res) { // 繪制背景海報(bào)到canvas var postersize = that.setCanvasSize(750);//動(dòng)態(tài)設(shè)置畫布大小 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(); //獲取臨時(shí)緩存合成照片路徑,存入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); } }) }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage: function () { }, //適配不同屏幕大小的canvas setCanvasSize: function (width) { var size = {}; try { var res = wx.getSystemInfoSync(); var scale = 750 / width;//不同屏幕下canvas的適配比例;設(shè)計(jì)稿是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("獲取設(shè)備信息失敗" + e); } return size; }, //點(diǎn)擊圖片進(jìn)行預(yù)覽,長按保存分享圖片 previewImg: function (e) { var img = this.data.img; let _this = this; //保存二維碼到相冊 wx.saveImageToPhotosAlbum({ filePath: img, success: function (res) { wx.showModal({ content: '保存成功', confirmText: '確認(rèn)', showCancel: false, success: function (res) { } }); }, fail: function (res) { wx.showModal({ content: '保存失敗', confirmText: '確認(rèn)', showCancel: false, success: function (res) { } }); } }) }, })
新聞熱點(diǎn)
疑難解答
圖片精選