今天在做項(xiàng)目使用到了canvas繪制二維碼，發(fā)現(xiàn)以前的方法被棄用了。

wxml:

<canvas type="2d" id="myCanvas" style="width: 100%;height: 100vh"></canvas>

如果想要繪制需要將起臨時(shí)存儲(chǔ)起來，寫入成功的就可以進(jìn)行繪制了。（如果是點(diǎn)擊展示二維碼，最好是先將數(shù)據(jù)寫到onLoad事件中，在將要繪制的東西寫到點(diǎn)擊事件中去，在點(diǎn)擊事件中去獲取數(shù)據(jù))；

js:

Page({
  onReady:function () {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr     // 獲取寬
        canvas.height = res[0].height * dpr  // 獲取高
        ctx.scale(dpr, dpr)
        
        // 到這里就可以直接繪制
         let image = canvas.createImage();//創(chuàng)建iamge實(shí)例
        image.src = '引入本地的圖片背景圖';  // 引入本地圖片
        image.onload = function () {
          ctx.drawImage(image, 0, 0, 289, 370); // 背景圖

  }
})

繪制base64圖片

// 繪制base64圖片
          //聲明文件系統(tǒng)
          const fs = wx.getFileSystemManager();
          var times = new Date().getTime();
          var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';
          //將base64圖片寫入
          fs.writeFile({
            filePath: codeimg,
            data: code.slice(22),  // code就是接口返回的base64數(shù)據(jù)(分割掉前面的data:image/png;base64,)
            encoding: 'base64',
            success: () => {
              console.log(codeimg);
              wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
                .exec((res) => {
                  let ctx = res[0].node.getContext('2d');//getContext返回Canvas 的繪圖上下文
                  let canvas = res[0].node;
                  const bg = canvas.createImage();
                  bg.src = codeimg;
                  bg.onload = function () {
                    ctx.drawImage(bg, 76, 175, 140, 140);
                  }
                })
            }
          });

        }
        
      })

尺寸可以根據(jù)自己的需要進(jìn)行更改。

長按保存到本地（在真機(jī)測試中用bindlongtap不生效），可以換成catchlongtap。如果繪制的canvas再外面可以在渲染畫布的上面聲明一個(gè)變量等于this。????var?_this?=?this;

在寫入文件中設(shè)置_this.setData({_this:canvas});

 fs.writeFile({
            filePath: codeimg,
            data: code.slice(22),
            encoding: 'base64',
            success: () => {
              wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
                .exec((res) => {
                  let ctx = res[0].node.getContext('2d');//getContext返回Canvas 的繪圖上下文
                  let canvas = res[0].node;
                  const bg = canvas.createImage();
                  bg.src = codeimg;
                  bg.onload = function () {
                    ctx.drawImage(bg, 76, 175, 140, 140);
                  }
                // 設(shè)置
                  _this.setData({
                    _this: canvas
                  })
                })
            }
          });

在長按保存事件中(catchlongtap),將canvas = 畫布this.data._this文章來源地址http://www.zghlxwxcb.cn/news/detail-507940.html

wx.canvasToTempFilePath({
      // 把畫布轉(zhuǎn)化成臨時(shí)文件
      x: 0,
      y: 0,
      width: 380, // 截取的畫布的寬
      height: 600, // 截取的畫布的高
      destWidth: 380, // 保存成的畫布寬度
      destHeight: 600, // 保存成的畫布高度
      fileType: 'png', // 保存成的文件類型
      quality: 1, // 圖片質(zhì)量
      canvas: this.data._this, // 畫布
      success(res) {
        console.log(res);
        // 2-保存圖片至相冊
        wx.saveImageToPhotosAlbum({
          // 存成圖片至手機(jī)
          filePath: res.tempFilePath,
          success(res2) {
            wx.hideLoading();
            wx.showToast({
              title: '保存成功',
              duration: 2000
            });
          },
          fail(res3) {
            if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
              wx.showToast({
                title: '保存失敗，稍后再試',
                duration: 2000,
                icon: 'none'
              });
              wx.hideLoading();
            } else {
              wx.showToast({
                title: '保存失敗，稍后再試',
                duration: 2000,
                icon: 'none'
              });
              wx.hideLoading();
            }
          }
        });
      },
      fail(err) {
        console.log(err);
        wx.showToast({
          title: '保存失敗，稍后再試',
          duration: 2000,
          icon: 'none'
        });
        wx.hideLoading();
      }
    });
  }

到了這里，關(guān)于微信小程序新版canvas繪制圖片方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！