Javascript环境下canvas画布无法加载图片问题排查求助

• 路径匹配问题：代码中使用相对路径spongebob.png，需确认该图片与当前HTML文件在Tomcat的同一部署目录下。若图片存放于img等子目录，需对应修改路径为img/spongebob.png；也可直接输入图片的绝对路径验证是否为路径问题。需要注意Tomcat对路径大小写敏感，若图片文件名为Spongebob.png或后缀为.PNG大写，和代码中拼写不匹配也会导致404加载失败。
• 跨域资源限制：若图片存储在其他域名、同域名不同端口的服务下，会触发浏览器跨域资源限制，导致图片加载完成后也无法渲染到canvas中。可打开浏览器F12控制台查看是否有跨域相关报错。
• 图片资源损坏：直接在浏览器地址栏输入图片的完整访问路径，确认图片本身可正常打开，排除文件损坏的问题。
• 缓存导致的异常：可给图片路径添加随机参数清除缓存测试，例如将img.src = "spongebob.png"修改为img.src = "spongebob.png?t=" + new Date().getTime()，排除浏览器旧缓存的影响。

简易调试方法 #

可给Image对象添加error事件监听，快速定位加载失败原因：

img.addEventListener('error', function(e) {
    console.log('图片加载报错：', e);
}, false);

添加后打开浏览器控制台，即可直接看到是404、跨域还是其他类型的加载错误。

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