微信小程序實現(xiàn)的canvas合成圖片功能示例

來源：懂視網責編：小采時間：2020-11-27 21:57:40

微信小程序實現(xiàn)的canvas合成圖片功能示例

微信小程序實現(xiàn)的canvas合成圖片功能示例:本文實例講述了微信小程序實現(xiàn)的canvas合成圖片功能。分享給大家供大家參考，具體如下：先要獲取圖片的信息然后將需要合成的內容用canvas繪制出來，得到一個合成好的畫布，接下來用 wx.canvasToTempFilePath 把當前畫布指定區(qū)域的內容導出生成指定大小的圖

推薦度：

點擊下載本文 文檔為doc格式

導讀微信小程序實現(xiàn)的canvas合成圖片功能示例:本文實例講述了微信小程序實現(xiàn)的canvas合成圖片功能。分享給大家供大家參考，具體如下：先要獲取圖片的信息然后將需要合成的內容用canvas繪制出來，得到一個合成好的畫布，接下來用 wx.canvasToTempFilePath 把當前畫布指定區(qū)域的內容導出生成指定大小的圖

本文實例講述了微信小程序實現(xiàn)的canvas合成圖片功能。分享給大家供大家參考，具體如下：

先要獲取圖片的信息然后將需要合成的內容用canvas繪制出來，得到一個合成好的畫布，接下來用 wx.canvasToTempFilePath 把當前畫布指定區(qū)域的內容導出生成指定大小的圖片，并返回文件路徑。這個時候的路徑是微信的臨時路徑，瀏覽器是訪問不了的，因此需要請求服務器用 wx.uploadFile 將本地資源上傳到開發(fā)者服務器。

在頁面的wxml中加入canvas組件如下：

<view class="canvasBox">
 <canvas canvas-id="shareCanvas" style="width:375px;height:300px"></canvas>
</view>

在js中

picture: function () { //生成圖片
 let that = this;
 let p1 = new Promise(function (resolve, reject) {
 wx.getImageInfo({
 src: 圖片路徑,
 success(res) {
 resolve(res);
 }
 })
 }).then(res => {
 const ctx = wx.createCanvasContext('shareCanvas');
 ctx.drawImage(res.path, 0, 0, 375, 300); //繪制背景圖
 //ctx.setTextAlign('center') // 文字居中
 ctx.setFillStyle('#000000') // 文字顏色：黑色
 ctx.setFontSize(20) // 文字字號：22px
 ctx.fillText("文本內容", 20, 70) //開始繪制文本的 x/y 坐標位置（相對于畫布） 
 ctx.stroke();//stroke() 方法會實際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認顏色是黑色
 ctx.draw(false, that.drawPicture());//draw()的回調函數 
 console.log(res.path);
 })
 },
 drawPicture: function () { //生成圖片
 var that = this;
 setTimeout(function(){
 wx.canvasToTempFilePath({ //把當前畫布指定區(qū)域的內容導出生成指定大小的圖片，并返回文件路徑
 x: 0,
 y: 0,
 width: 375,
 height: 300,
 destWidth: 750, //

輸出的圖片的寬度（寫成width的兩倍，生成的圖片則更清晰） destHeight: 600, canvasId: 'shareCanvas', success: function (res) { console.log(res); that.draw_uploadFile(res); }, }) },300) }, draw_uploadFile: function (r) { //wx.uploadFile 將本地資源上傳到開發(fā)者服務器 let that = this; wx.uploadFile({ url: 圖片上傳接口, //線上接口 filePath: r.tempFilePath, name: 'imgFile', success: function (res) { console.log(res); if(res.statusCode==200){ res.data = JSON.parse(res.data); let imgsrc = res.data.data.src; that.setData({ imgPath: imgsrc }); }else{ console.log('失敗') } }, }) },

注意：若是將此方法寫成自定義組件，則 wx.createCanvasContext 和 wx.canvasToTempFilePath 都需要多傳一個this，