关于微信小程序canvas保存图片

参考知识：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

大家都知道，现在的版本微信已经不再更新维护wx.createCanvasContext方法了，从基础库 [2.9.0]开始，该接口停止维护，需要用Canvas更替，那么以前的版本要怎么更新替换，可能很多小伙伴会苦恼，正好最近微信了一个老项目，踩了坑，给大家分享下我的经验~

不同点：

老版本

wx.createCanvasContext('firstCanvas')

是需要绑定canvas-id="firstCanvas"
新版本：

const query = wx.createSelectorQuery()
    query.select('#firstCanvas')
      .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, 100, 100)
      })
  }

有几点需要注意：

新版本是去查询节点信息，因为用到这个功能的小伙伴大概率都是需要保存一些图片的，通常会有一些wx:if标签来包裹canvas
等你获取的时候可能就会报错，最终获取的res为null，很明显这是因为canvas标签不存在而导致的问题，我也被这个坑了，其实换一下顺序就可以了，在元素显示的时候再去画图就好了~

一般这个时候就已经可以显示了，下面是一些方法使用的变更
1.绘图

        const headerImg = canvas.createImage();
        headerImg.src = url;
        headerImg.onload = () => {
            ctx.drawImage(headerImg, 13, 10, 304, 186);
        }

注意：http://tmp/GjHyDdJkgBPc67b81999d30ebc2e33b2397248e3b09a.png这种格式的图片在工具会报错，不过真机不影响

2.阴影

        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowColor = 'rgba(0,0,0,0.5)';
        //阴影的模糊半径
        ctx.shadowBlur = 10;
        ctx.shadowColor = 'rgba(0,0,0,0)'//重置阴影

3.文字颜色等

        ctx.fillStyle = that.data.color
        ctx.font = "16px Arial";
        ctx.textAlign = 'center'
        ctx.fillText(name, 165, 60)

将画布保存到相册

这个方法也有了一些变更

        wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
            x: 0,
            y: 0,
            width: 330,
            height: 415,
            destWidth: 660, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
            destHeight: 830,
            canvas: canvasObj,
            success: function (res) {
                console.log(res)
                wx.showLoading({
                    title: "加载中..."
                })
            }
        })

image.png

旧方法：canvasId: 'firstCanvas',
新方法：canvas: canvasObj 需要将canvas实例传进去才可以

完整代码:在最外部定义下canvasObj 方便后面画图

    //canvas绘制名片
    async drawPicture() {
        var that = this
        const query = wx.createSelectorQuery();
        const res = await new Promise((resolve, reject) => {
            query.select('#firstCanvas')
                .fields({ node: true, size: true })
                .exec(async (res) => {
                    resolve(res);
                })
        })
        canvasObj = res[0].node
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
}
    //生成图片
    async drawPictures() {
        var that = this;
        wx.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
            x: 0,
            y: 0,
            width: 330,
            height: 415,
            destWidth: 660, //输出的图片的宽度（写成width的两倍，生成的图片则更清晰）
            destHeight: 830,
            canvas: canvasObj,
            success: function (res) {
                console.log(res)
            }
        })
    },

注意：真机调试好像是不支持2d，可能会报错

！！希望可以帮助到你

更多相关内容关注：bug纪念录