您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序怎么實現(xiàn)張圖片合成為一張并下載的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
微信小程序?qū)崿F(xiàn)張圖片合成為一張并下載的具體內(nèi)容如下
微信小程序海報
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { imgUrl: "項目中圖片地址", //圖片鏈接 img: '' // 合成后圖片路徑 }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { let that = this; wx.downloadFile({ url: '線上圖片地址', success(res) { // 繪制背景海報到canvas var postersize = that.setCanvasSize(750);//動態(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(); //獲取臨時緩存合成照片路徑,存入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)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }, //適配不同屏幕大小的canvas setCanvasSize: function (width) { var size = {}; try { var res = wx.getSystemInfoSync(); var scale = 750 / width;//不同屏幕下canvas的適配比例;設(shè)計稿是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; }, //點擊圖片進行預(yù)覽,長按保存分享圖片 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) { } }); } }) }, })
感謝各位的閱讀!關(guān)于“微信小程序怎么實現(xiàn)張圖片合成為一張并下載”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。