使用html-to-image等npm包转HTML为图片时无法捕获img标签内容是什么原因

• 跨域资源访问限制
  这类HTML转图片库底层都依赖<canvas> API实现内容绘制，浏览器同源策略要求<canvas>绘制的图片资源必须和当前页面同域，要么目标图片资源配置了正确的CORS跨域头，同时调用库时需要开启对应跨域配置，比如html2canvas要配置useCORS: true，否则跨域的<img>资源会导致canvas被污染，无法正常渲染输出。
• <img>标签未声明跨域属性
  就算图片资源配置了CORS头，页面内的<img>标签如果没有添加crossorigin="anonymous"属性，浏览器加载图片时不会携带跨域许可标识，最终还是会导致canvas绘制失败。
• 资源加载时序问题
  调用截图方法时，<img>标签的资源还没有完全加载完成，库绘制时抓不到已加载完成的图片内容，即便是静态图片也可能出现该问题。建议等所有图片资源加载完成后再调用截图方法，可以通过监听window.onload事件、或者预加载所有img资源后再触发截图逻辑。
• 图片格式兼容问题
  部分特殊编码的图片（比如特殊编码的WebP、内嵌了外部资源的SVG）可能无法被canvas绘制逻辑正常识别，可替换为常规JPG、PNG格式测试验证。
• 库配置项遗漏
  比如html2canvas默认会跳过部分资源的解析，可检查是否配置了错误的资源过滤规则导致img标签被跳过绘制，也可以临时开启allowTaint配置验证是否为跨域问题（注意该配置开启后会污染canvas，无法调用导出方法，不推荐生产环境使用）。

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