HTML Canvas中drawImage()不显示图片的跨设备问题排查

一、Windows 10 Firefox 首次打开失效、刷新恢复的原因 #

核心问题是图片加载时机与JS执行时机不匹配：

• 首次打开时，浏览器本地无图片缓存，img元素能显示是因为浏览器会异步等待图片加载完成后再渲染，但你的JS代码大概率在图片还没完成加载（甚至未完成解码）时就调用了drawImage()——此时图片没有可用的像素数据，Canvas自然无法绘制内容。
• 刷新后，图片已被缓存到本地，加载速度极快，JS执行时图片已经完全就绪，drawImage()能获取完整像素数据，因此绘制正常。

二、Android 6 完全失效的缘由 #

Android 6 搭载的系统WebView版本普遍较低（对应Chrome 48-53区间），存在几个关键问题：

1. 图片加载事件兼容性缺陷：旧WebView对img.onload事件的触发时机处理不完善，可能在图片未完成解码时就触发事件，此时调用drawImage()依然拿不到有效像素数据。
2. Canvas绘制兼容性限制：该版本WebView对drawImage()的参数处理、图片格式解码支持存在不足，尤其是部分较新的图片格式（如WebP），即便img能正常显示，Canvas也无法解析绘制。
3. 本地文件加载安全限制：如果加载的是file://协议的本地图片，旧WebView的安全策略可能阻止Canvas读取图片数据（尽管img能显示），导致绘制失败。

通用解决办法 #

要彻底解决这类问题，必须确保在图片完全加载完成后再调用drawImage()，标准写法如下：

const img = document.getElementById('target-img');
const canvas = document.getElementById('target-canvas');
const ctx = canvas.getContext('2d');

// 绑定load事件，确保图片加载完成后再执行绘制
img.addEventListener('load', function() {
  // 同步Canvas尺寸与图片一致
  canvas.width = this.width;
  canvas.height = this.height;
  ctx.drawImage(this, 0, 0);
});

// 若为动态创建图片，务必先绑定load事件再设置src
// img.src = './your-image.png';

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