canvas画布生成头像报错file.php:136 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRen问题

2020-12-03 阅读：3305 类型：前端分类：canvas 标签： canvas

file.php:136 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRen

出现这个问题原因：这是因为drawImage（）向canvas导入的图片跨域而导致的。

解决方法：

var img=new Image;
img.crossOrigin="anonymous"; //关键
img.src="图片地址";

在引用加载图片之前打开跨域资源允许权限（一定要注意顺序）

function loadImg(src) {
    let paths = Array.isArray(src) ? src : [src]
    let promise = paths.map((path) => {
        return new Promise((resolve, reject) => {
            let img = new Image()
            img.setAttribute("crossOrigin", 'anonymous')
            img.src = path
            //只是更新了DOM对象,图片数据信息还未加载完成，加载资源是异步执行的,需要监听load事件的,事件发生后,就能获取资源
            img.onload = () => {
                resolve(img)
            }
            img.onerror = (err) => {
                alert('图片加载失败')
            }
        })
      })
      return Promise.all(promise)
}

loadImg([
    wx_img+'0',
    './icon.png',
]).then(([img1, img2])=> {
    ctx.drawImage(img1, 0, 0, 600, 600) //画布上先绘制人物图`
    ctx.drawImage(img2, 0, 0, 600, 600) //再绘制二维码图，根据设计图设置好坐标。`
    imageURL = canvas.toDataURL("image/png") //获取图片合并后的data-URL,参数可选图片格式，图片质量，详自查API`
    let img3 = new Image()
    document.getElementsByClassName("app")[0].append(img3)
    img3.src = imageURL
    canvas.style.display = "none"
    $("#app").append(" <p>长按图片保存</p>")
});