微信小程序新版canvas绘制图片方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序新版canvas绘制图片方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天在做项目使用到了canvas绘制二维码，发现以前的方法被弃用了。

wxml:

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

如果想要绘制需要将起临时存储起来，写入成功的就可以进行绘制了。（如果是点击展示二维码，最好是先将数据写到onLoad事件中，在将要绘制的东西写到点击事件中去，在点击事件中去获取数据)；

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();//创建iamge实例
        image.src = '引入本地的图片背景图';  // 引入本地图片
        image.onload = function () {
          ctx.drawImage(image, 0, 0, 289, 370); // 背景图

  }
})

绘制base64图片

// 绘制base64图片
          //声明文件系统
          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数据(分割掉前面的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);
                  }
                })
            }
          });

        }
        
      })

尺寸可以根据自己的需要进行更改。

长按保存到本地（在真机测试中用bindlongtap不生效），可以换成catchlongtap。如果绘制的canvas再外面可以在渲染画布的上面声明一个变量等于this。 var _this = this;

在写入文件中设置_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);
                  }
                // 设置
                  _this.setData({
                    _this: canvas
                  })
                })
            }
          });

在长按保存事件中(catchlongtap),将canvas = 画布this.data._this文章来源地址https://www.toymoban.com/news/detail-507940.html

wx.canvasToTempFilePath({
      // 把画布转化成临时文件
      x: 0,
      y: 0,
      width: 380, // 截取的画布的宽
      height: 600, // 截取的画布的高
      destWidth: 380, // 保存成的画布宽度
      destHeight: 600, // 保存成的画布高度
      fileType: 'png', // 保存成的文件类型
      quality: 1, // 图片质量
      canvas: this.data._this, // 画布
      success(res) {
        console.log(res);
        // 2-保存图片至相册
        wx.saveImageToPhotosAlbum({
          // 存成图片至手机
          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();
      }
    });
  }

到了这里，关于微信小程序新版canvas绘制图片方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！