微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异

Posted 钻葛格

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异相关的知识,希望对你有一定的参考价值。

参见文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html

见下文第21行,不要使用 canvasId,canvas type="2d" 时,传入 canvas 组件实例 ,object类型。

btn_tap(e) {
    var that = this;
    var img_url = e.currentTarget.dataset.url;
    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)

        ctx.fillRect(0, 0, 480, 640)
        let img = _canvas.createImage();
        img.onload = () => {
          ctx.drawImage(img, 0, 0, 480, 480);
          wx.canvasToTempFilePath({
            canvas: _canvas,
            success: (resx) => {
                wx.saveImageToPhotosAlbum({
                  filePath: resx.tempFilePath,
                  success: (resxx) => {
                    wx.showToast({
                      title: \'保存成功\',
                      duration: 1000,
                    });
                  }
              });
            },
            fail: (ex) => {
                console.log(ex);
            }
          });
        };
        img.src = img_url;
      });
    return;
  }

  

以上是关于微信小程序canvas画布新接口type为2D时wx.canvasToTempFilePath的参数差异的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序canvas2d绘制圆环进度条组件

微信小程序将图片保存到本地的方法

一个轻量级的微信小程序 Canvas (type="2d") 渲染引擎

微信小程序 怎么实现view内容保存到本地图片

微信小程序 base64 图片 canvas 画布 drawImage 实现

微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)