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

2020-12-03   阅读:3241   类型:前端   分类:canvas    标签: canvas

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

出现这个问题原因:这是因为drawImage()向canvas导入的图片跨域而导致的。

解决方法:

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

image.png

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

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>")
});


【腾讯云】2核2G云服务器新老同享 99元/年,续费同价,云服务器3年机/5年机限时抢购,低至 2.5折

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/532.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×