关于使用canvas真机不生效，开发者工具正常

此处遇到的bug有很多情况，我们分情况来解决

1.1、取微信小程序头像失败

报错信息如下：

https://wx.qlogo.cn 不在以下 downloadFile 合法域名列表中

那是因为我们用户头像是网络图片，要解决这个问题，只需要在微信公众号平台配置合法的downloadFile域名即可

1.2、canvas图片出不来

在小程序中

当我们使用

var canvas = document.getElementById("myCanvas");
context=canvas.getContext("2d")

发现开发者工具中正常，真机调试无法绘制

报错 信息如下：

getContext is not de

通过查看小程序文档，我们知道，那是因为版本过低，不支持，因此需要做兼容处理

低版本处理，我们需要用到createCanvasContext()这个方法来实现，此方法从基础库 2.9.0 开始，停止维护；

new Image()最好换成uni.getImageInfo(Object object)此方法

因为我们不能使用var canvas = document.getElementById("myCanvas")，因此我们也没有办法使用canvas.toDataURL()转成base64格式，不过小程序也提供了uni.draw()的api

兼容代码如下：

export function translate(imgData,canvasId,callback) {
    if(!imgData){
        callback()
    }
    uni.getImageInfo({
        src: imgData,
        success(res) {
            var width = res.width;
            var height = res.height;
            var circle = {
                x: width / 2,
                y: height / 2,
                r: width / 2
            }
            var ctx = uni.createCanvasContext(canvasId);
            ctx.clearRect(0, 0, width, height);
            //开始路径画圆,剪切处理
            ctx.save();
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false);
            ctx.clip(); //剪切路径
            ctx.drawImage(res.path, 0, 0);
            // //恢复状态
            ctx.restore();
            ctx.draw(false, () => {
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: width,
                    height: height,
                    destWidth: width,
                    destHeight: height,
                    canvasId: canvasId,
                    success: function(res) {
                        callback(res.tempFilePath)
                    }
                });
            });
        },
        fail(error) {
            console.log(error);
        }
    });
}

• 如何获取版本号？
  • 开发者可以在小程序中通过调用uni.getSystemInfo或者uni.getSystemInfoSync 获取到当前小程序运行的基础库的版本号。通过版本号比较的方式进行运行低版本兼容逻辑。
• 不兼容行不行？
  • 我个人认为上面方法在原生小程序中是可以实现，因为小程序文档都写了支持，但是我使用的是uni框架，这有可能就是因为uni框架在转换中出了问题。实际上，我们并没有写兼容性，因为我们写的是h5公众号，直接使用三个yapi就可以实现了。如果是小程序的话，我个人认为写兼容性是最好的

1.3、兼容canvas以后，图片还不出来

因为开发和测试是两套环境，我们遇到这个问题是因为数据不一致导致的，此处问题最好就是解决方法就是要求测试服务器的数据和生产服务器的数据一致，这样子方便我们在开发者工具中能很好的找出问题所在。

这次遇到的原因如下：

也就是我们使用了ctx.fillText(userInfo.deptName, uni.upx2px(145), uni.upx2px(845) ,uni.upx2px(200))在canvas上写字，但是userInfo.deptName的参数为undefined，导致画布失效，因此我们需要对fillText里面的字符串做处理

改成ctx.fillText(userInfo.deptName || '', uni.upx2px(145), uni.upx2px(845) ,uni.upx2px(200))即可