使用canvas捕获页面img元素生成本地URL时出现白框如何解决

核心错误：drawImage参数使用错误 #

drawImage() 方法的基础调用规则为 context.drawImage(源图像, 绘制起始X坐标, 绘制起始Y坐标, 绘制宽度, 绘制高度)，你当前的写法 cxt.drawImage(test, width, height) 相当于将图片的左上角放在了画布的(200, 300)位置，而你的画布本身尺寸仅为200px宽、300px高，整张图片直接被绘制到了画布可视区域之外，因此只会显示空白。
正确写法为从画布左上角原点开始绘制，匹配画布尺寸：
cxt.drawImage(test, 0, 0, width, height)

其他潜在问题排查 #

• 跨域限制：如果你的图片源地址和当前页面域名不一致，且未配置允许跨域的响应头，canvas绘制后调用toDataURL会抛出跨域错误，可给img标签添加crossorigin="anonymous"属性解决。
• 图片未加载完成：如果点击按钮时图片还未加载完毕，也会出现空白绘制结果，可增加图片加载完成状态判断规避该问题。

修正后的完整JS代码 #

var width=200
var height=300
function takePhoto(){
    var test = document.getElementById("test")
    // 校验图片加载状态
    if (!test.complete) {
        alert('图片加载中，请稍后尝试')
        return
    }
    var canvas = document.createElement("canvas")
    document.body.appendChild(canvas)
    var cxt = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;
    cxt.drawImage(test, 0, 0, width, height);
    var data = canvas.toDataURL('image/png');
    console.log(data)     
}

内容的提问来源于stack exchange，提问作者random person