微信小程序关于使用canvas真机不生效，开发者工具正常的3种常见问题分析

梦里梦外; 2022-09-13 13:21 627阅读 0赞

### canvans ###

*  关于使用canvas真机不生效，开发者工具正常
 *   *  1.1、取微信小程序头像失败
     *  1.2、canvas图片出不来
     *  1.3、兼容canvas以后，图片还不出来

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

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

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

报错信息如下：

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

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

## 1.2、canvas图片出不来 ##

在小程序中

当我们使用

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

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

报错 信息如下：

`getContext is not de`

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

低版本处理，我们需要用到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))`即可

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAdHNlbmfojZLnlLc_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/409f3907d3a4459682c2b528335ffe38.png
[image-20210928215518491]: /images/20220828/8beab00e0db3420dad55e6d3c0a1a868.png
[2.9.0]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html