小程序canvas繪制商品海報實現分享朋友圈

效果圖：

實現步驟就是點擊生成圖片 在canvas畫布中畫出一張海報 然后保存在本地 在imags標簽中展示，此處盡可能的把canvas組件隱藏 但是不能用wx：if。 用hidden或者display屬性
wxml

<button bindtap='gotoSubmit'>生成圖片</button> <!-- 彈框 --> <view class='tankuang2' wx:if="{{showhaibao}}"><view class='container1' bindtap="previewImg"><image style="width:100%;height:80%" src="{{imagePath}}" ></image></view> </view> <canvas style="width:{{windowW}}px;height:{{windowH}}px;display:{{maskHidden?'none':''}}" canvas-id="mycanvas" />

wxss

button{width: 100%;position: fixed;z-index: 1;bottom:0; } .tankuang2{height: 100%;width: 100%;background-color: rgba(0, 0, 0, 0.6);z-index: 999999;position: absolute;right: 0;bottom: 0;display: flex;align-items: center;justify-content: center; } .tankuang2 .container1{height: 90%;width: 90%;background-color:#FFF;}

第一大坑

我在js中注釋的代碼很重要，實際開發中繪制商品海報必然是用網絡圖片，但經過多次嘗試網絡圖片是不可以直接繪制在canvas畫布上的，就必須要把他緩存下來，弄一個本地路徑，此處我用本地圖片所以就注釋了

第二大坑

經過多次測試發現當你第一次點擊生成圖片的時候，它會生成一張透明的圖片，根本看不到，必須要點擊兩次，就是調用兩次生成圖片的方法才可以看到生成的圖片，我這里為了只讓他點擊一次就生成圖片，在小程序生命周期函數onReady先調用一次 初始化一下圖片。

js

Page({data: {showhaibao：false，//隱藏顯示maskHidden: true,//隱藏顯示},onLoad: function(options) {// 此處獲取設備的寬高。canvas繪制的圖片以次寬高為準var _this = this;wx.getSystemInfo({success: function(res) {console.log(res)_this.setData({windowW: res.windowWidth ,windowH: res.screenHeight,})},})// wx.downloadFile({// url: 網絡圖片地址必須要在小程序中配備合法域名,// success: function (res1) {// console.log(res1.tempFilePath)// //緩存商品圖片// _this.setData({// img1: res2.tempFilePath// })// }// })// wx.downloadFile({// url: 網絡圖片地址必須要在小程序中配備合法域名,// success: function (res1) {// console.log(res1.tempFilePath)// //緩存二維碼圖片// _this.setData({// img2: res2.tempFilePath// })// }// })},onReady: function() {// 頁面渲染完成this.createNewImg();//創建初始化圖片},//將金額繪制到canvas的固定setMoney: function(context) {var money ='￥29.9'context.setFontSize(24);context.setFillStyle("red");context.fillText(money, 40, 360);context.stroke();},//將說明繪制到canvas固定setSuoming :function(context){var Suoming="長按識別小程序碼訪問"context.setFontSize(18);context.setFillStyle("#484a3d");context.fillText(Suoming, 15, 460);context.stroke();},//將說明2繪制到canvas固定setSuoming1: function (context) {var Suoming = "子謙出品"context.setFontSize(18);context.setFillStyle("#484a3d");context.fillText(Suoming, 50, 510);context.stroke();},//將標題繪制到canvas的固定setName: function(context) {var name = "ONLY2018夏季新款蕾絲短袖連衣裙"context.setFontSize(15);context.setFillStyle("#67695b");context.fillText(name, 40, 320);context.stroke();},//將canvas轉換為圖片保存到本地，然后將圖片路徑傳給image圖片的srccreateNewImg: function() {var _this = this;var context = wx.createCanvasContext("mycanvas");context.setFillStyle('#FFF')console.log(this.data.windowW, this.data.windowH)context.fillRect(0, 0, this.data.windowW, this.data.windowH)var path = "這里放你的本地圖片路徑，或者網絡圖片緩存在本地的路徑"; //詳細看onLoad函數注釋部分context.drawImage(path, 30, 20, 300, 250); //這里是商品圖片this.setSuoming(context);this.setName(context);this.setMoney(context);this.setSuoming1(context);context.drawImage(path, 205, 430, 150, 150);//這里是二維碼圖片context.draw(_this.getImg())},//將生成好的圖片保存到本地 下面這句注釋是文檔中的原話。// tip: 在 draw 回調里調用canvasToTempFilePath方法才能保證圖片導出成功。getImg() {var _this = this;wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function success(res) {_this.setData({imagePath: res.tempFilePath,});}});},//點擊圖片進行預覽，長按保存分享圖片previewImg: function(e) {var img = this.data.imagePathwx.previewImage({current:img, // 當前顯示圖片的http鏈接urls: [img] // 需要預覽的圖片http鏈接列表})},gotoSubmit: function(e) {var _this=thisthis.setData({maskHidden:false,showhaibao:true})wx.showToast({title: '圖片生成中...',icon: 'loading',duration: 2000});setTimeout(function() {wx.hideToast()_this.createNewImg();}, 2000)}})

總結

以上是生活随笔為你收集整理的小程序canvas绘制商品海报实现分享朋友圈的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。