js报错 Uncaught DOMException: Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘: The can_uncaught domexception: failed to execute 'getimage-优快云博客

本文链接：https://blog.youkuaiyun.com/Treeee_/article/details/111996118

在使用IDEA进行前端开发时遇到getImageData跨域错误，尝试了设置时间戳、修改image的crossOrigin属性及调整浏览器设置等方法未果。最终通过在VsCode中安装LiveServer插件成功解决，该插件提供了本地服务器环境，避免了直接从文件系统加载导致的跨域问题，操作简单便捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用IDEA时，调用getImageData()报跨域的错误，原因是图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错。

搜索了很多方法尝试解决，包括：

设置时间戳

var img = new Image();
var url = 'https://media.prod.mdn.mozit.cloud/attachments/2013/06/22/5397/7a3ec0cae64a95ad454ac3bc2c71c004/rhino.jpg';
img.src = url + '?' + new Date().getTime();
img.setAttribute('crossOrigin', '');

https://blog.youkuaiyun.com/leftfist/article/details/106947101

设置crossOrigin属性并修改浏览器设置

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.crossOrigin = '';    //这里！！！
    img.onload = function () {
        context.drawImage(this, 0, 0);
        context.getImageData(0, 0, this.width, this.height);
    };
    img.src = 'https://vip.itzlm.cn/images/canvas.jpg';