为什么我的带有外部图像源的div下载不正确

Question

我正在做一个项目，但我陷入了困境。我需要帮助。

项目概述：我正在构建一个项目，该项目接收一个网址，转到该网址，获取该地址中的所有图像链接并将其作为数组返回。每个图像链接现在都在模板中返回到前端。每个模板只是一个设计好的 div，当每个图像链接转到时，都有一个用于放置标签的空间。这与在 Pingenerator.com 上获得的类似

问题：我可以获取所有这些链接并将它们返回到前端，但是当我尝试使用 html2Canvas 下载 div 时，我看不到图像。

请注意，当我尝试使用本地驱动器中保存的图像下载 div 时，它会正确下载。但是当图像源是外部时，它无法下载图像

这是我的代码

html2canvas($('#templated')[0], {
    useCORS: true, 
    allowTaint: false,
    logging: true,
    onclone: function(clonedDoc) {
        $(clonedDoc.getElementById('templated')).css('display', 'block');
    }
}).then(function(canvas) {
    const link = document.createElement('a');
    link.href = canvas.toDataURL('image/jpeg', 0.95);
    link.download = 'template.jpg'; 
    link.click(); 
}).catch(function(error) {
    console.error('Error occurred while rendering the canvas:', error);
});

Answer 1

当您有一个画布元素并从外部源向其绘制图像时，画布就会被“污染”。当画布处于这种状态时，在大多数情况下，它将正常显示给最终用户，但您无法从画布中读取像素值。

原因如下：

• 假设您的网站位于 example.com
• 在浏览器客户端中，您可以从另一个站点 example.net 加载图像。
• 图像可能是为用户定制的，例如，图像可能是动态生成的，并且对我来说显示为绿色，如果您要加载它，则显示为红色。
• 您将图像绘制到画布上
• 您尝试读取画布元素。

此时，如果不阻止读取操作，坏人可能会推断画布是绿色的。这是一个安全漏洞。

html2canvas

有一个常见问题解答也解释了这一点。

您可以使用像

nginx

这样的反向代理来代理图像，或者您可以先将图像下载到您的服务器并从与您的网站相同的来源提供它们。