Html2canvas: 跨域图像未呈现（无 CORS 或代理）

也许您应该使用useCORS ptoperty 作为 true，它用于跨域 Web 内容

使用useCORS图像抓取失败。 我遇到的问题很奇怪，因为它不会无法从外部域获取图像，只是不会在捕获中呈现它。

你试过我的修复吗？ https://github.com/niklasvh/html2canvas/pull/554

可能应该将allowTaint为 true，但是您无法导出渲染结果。

我不明白为什么不使用userCORS或proxy ......它们只是为此类问题而创建的。

@brcontainer因为它们在最新版本中不起作用，请参阅我的修复程序： https :

@Cristy94当然！！ 伟大的修复！ 谢谢！

嗨@Cristy94 ，

我正在我的 HTML 中从 CMS(Contentful) 获取图像，然后尝试生成该 HTML 的 PDF。
但是在生成的PDF中，图像丢失了。（似乎是跨源问题）。
请建议我如何摆脱这个问题。
以下是我的代码-：

函数下载PDF() {
var canvasToImage = 函数（画布）{
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.crossOrigin = "匿名";
img.src = dataURL;
返回图像；
};

var canvasShiftImage = function(oldCanvas,shiftAmt){
shiftAmt = parseInt(shiftAmt) || 0;
if(!shiftAmt){ 返回 oldCanvas; }

var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

var img = canvasToImage(oldCanvas);
ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

返回新画布；
};

var canvasToImageSuccess = 函数（画布）{
var pdf = new jsPDF('l','px'),
pdfInternals = pdf.internal，
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width,
pdfPageHeight = pdfPageSize.height,
总PDF高度 = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
安全网 = 0;

while(totalPdfHeight < htmlPageHeight && 安全网 < 15){
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
// var alias = Math.random().toString(35);
// pdf.addImage(newCanvas, 0, 0, pdfPageWidth, 0, 'png', alias, 'NONE');

totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

if(totalPdfHeight < htmlPageHeight){
pdf.addPage();
}
安全网++；
}

var pageName = document.location.pathname.match(/[^/]+$/)[0];
pdf.save(pageName + '.pdf');
};

html2canvas($('body')[0],
{
渲染：功能（画布）{
canvasToImageSuccess（画布）；
}
});
}

嘿嘿，有办法解决吗？ 此处也未呈现 CORS 图像:(

嗨，鲁克夫，

您可以通过在 html2canvas 函数中传递选项之一来实现。 相信我，这肯定会奏效:)

html2canvas($('#div_pdf')[0],
{
useCORS: true, //通过在函数中传递此选项跨源图像将在下载的PDF版本中正确呈现
onrendered：函数（画布）{
canvasToImageSuccess（画布）；
}
});
有关更多信息，您可以查看以下 URL 上的 html2canvas 库文档：
https://html2canvas.hertzen.com/documentation.html

嗨@gauravmishra24 ，不幸的是这不起作用。 问题是我想包含来自服务器具有标志的服务器的图像

Access-Control-Allow-Origin: *

未设置

:(

嗨，鲁克夫，

你能发布你的代码片段吗？

以便我可以更好地查看相同的内容.....

你好，

有什么解决办法吗？ 即使将 useCORS 设置为 true，也不会下载图像。 仍然得到如上所述的跨域错误。

另外，不确定分布式 html2Canvas.js 文件中 Cristy94 的解决方案。 即使在分布式文件中更改代码后，根据https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402它也不起作用。

对于使用代理设置的另一种选择，angular 2 应用程序是否有任何解决方案？
当前站点 (https://github.com/niklasvh/html2canvas/wiki/Proxies) 列表中没有！

这仍然是v1.0.0的问题吗？ 如果是这样，你能不能分享一个关于jsfiddle的例子。

此问题已自动关闭，因为我们要求原作者提供更多信息的请求没有得到回应。 只有当前问题中的信息，我们没有足够的信息来采取行动。 如果您有或找到我们需要的答案，请联系我们，以便我们进一步调查。

@niklasvh这是我使用 v1.0.0 的 codepen 示例：
https://codepen.io/Onlylonger/pen/ppjPKX
同样的问题。 谢谢你

有没有其他人知道的插件。 这不适用于不同的服务器请求。 没有为代理提供适当的示例。

@vinayistar您可以尝试我的更改，请参阅链接https://github.com/niklasvh/html2canvas/issues/1544#issuecomment -435640901

使用useCORS并设置 img 属性crossOrigin:anonymous

{ useCORS: false, allowTaint: true }这对我有用

我对这个问题的解决方案是将图像 src 转换为 Base64

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoi你

@nishanta454
这是我写的例子。 html2canvas 渲染交叉原点图像。
在此示例中，我使用cors-anywhere将 CORS 标头添加到代理图像请求。

我们需要的第一件事是配置为托管图像的服务器，该服务器将 Access-Control-Allow-Origin 标头配置为允许对图像文件进行跨源访问。
来自CORS_enabled_image