微信小程序canvas相关避坑总结

1. 原生canvas
canvas生成图片偶尔不成功问题

解决办法：在 wx.canvasToTempFilePath 外边加 setTimeout，例如

ctx.draw(false, ()=> {
    setTimeout(()=> {
        wx.canvasToTempFilePath({
            canvasId: 'cvs',
            success: (res)=> {
                this.setData({
                    finalImg: res.tempFilePath
                })
            }
        }, this)
    }, 500)
})

字体全局加粗问题

正常给字体加粗写法：

ctx.font = `normal bold 18px sans-serif`

但是这段代码会导致全局字体都加粗，

解决办法：加粗的文案统一放最后绘制

2. wxml-to-canvas

模拟器上运行报错

解决：找到源码，注释一些代码，如图

生成文案注意事项

文案必须用<text></text>标签包裹，且line-height默认是‘1.4em’，最好改成‘1em’，方便调整间距

高dpr机型报错

dpr为3的真机运行时报错

解决：所有尺寸缩放一倍，如图

<wxml-to-canvas>组件外层不能有wx:for

问题：组件attached生命周期被多次执行，res会取到{null}导致报错，报错位置如图：

解决：<wxml-to-canvas>及其父级组件外围不要有wx:for，如果业务逻辑不允许，可用hidden代替