快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例

更新時(shí)間：2019年05月03日 11:25:04 作者：_zengZeng

這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實(shí)例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項(xiàng),需要的朋友可以參考下

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

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

在頁面的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)     // 文字字號(hào)：22px
    ctx.fillText("文本內(nèi)容", 20, 70) //開始繪制文本的 x/y 坐標(biāo)位置（相對(duì)于畫布） 
    ctx.stroke();//stroke() 方法會(huì)實(shí)際地繪制出通過 moveTo() 和 lineTo() 方法定義的路徑。默認(rèn)顏色是黑色
    ctx.draw(false, that.drawPicture());//draw()的回調(diào)函數(shù) 
    console.log(res.path);
   })
  },
  drawPicture: function () { //生成圖片
    var that = this;
   setTimeout(function(){
    wx.canvasToTempFilePath({ //把當(dāng)前畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，并返回文件路徑
     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ā)者服務(wù)器
   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 都需要多傳一個(gè)this，