如果文件字段 src 是 url,则 html2canvas 无法获取图像

介绍

html2canvas 是一个 JavaScript 库，用于将网页中的 HTML 元素渲染为 Canvas。然而，如果网页中的图片或其他元素使用了外部链接，如使用了 URL 作为文件字段 src 的值，那么html2canvas就无法获取这些图像。这是因为在 HTML 加载期间，浏览器会根据其内容和类型从远程服务器上下载这些图片，而这需要一定的时间。而在 html2canvas 运行时，这些文件是没有被完全加载的，因此无法获取到完整的图像。

解决方案

1. 使用 base64 编码的图像：将图片转换为 base64 编码格式，然后将其作为 src 字段的值，这样 html2canvas 就可以直接将其渲染为 Canvas。当然，这种方法可以直接绕过跨域问题，但是存在一个缺点，就是图片的大小会变大，这对于网页的性能和加载时间都有一定的影响。

2. 解决跨域问题：在图片的服务器上添加 Access-Control-Allow-Origin 响应头以及 CORS（Cross-Origin Resource Sharing）配置，将允许的源添加到 CORS 白名单中。这样可以使浏览器允许跨域访问图片，从而 html2canvas 可以正常获取图像。

结论

在实际开发中，我们应该尽量避免使用外部链接来引用图片和其他资源文件。如果必须这样做，我们需要使用上述方法来解决问题，以确保 html2canvas 可以正常渲染网页并生成所需的 Canvas。