使用 html2canvas 生成图像而不是从远程服务器导入图像答案

【问题标题】：Generate image using html2canvas not importing images from remote server使用 html2canvas 生成图像而不是从远程服务器导入图像
【发布时间】：2020-01-05 16:02:38
【问题描述】：

我正在使用 html2canvas 库从 html 代码生成 png 图像。 html 结合了本地图像（来自图像文件夹）和远程图像（来自 url 地址 - 服务器）。图像看起来很棒，但缺少远程图像。知道如何解决这个问题吗？

 $('#save').click(function () {
   var elm = $('.media_container_1200628').get(0);
   var width = "1200";
   var height = "628";
   html2canvas(elm).then(function (canvas) {
   Canvas2Image.saveAsPNG(canvas, width, height);
  })
 });

【问题讨论】：

标签： node.js html2canvas

【解决方案1】：

如文档中所述，您应该允许跨域图像污染画布。 https://html2canvas.hertzen.com/configuration

在您的具体情况下，您可以执行以下操作：

$('#save').click(function () {
   var elm = $('.media_container_1200628').get(0);
   var width = "1200";
   var height = "628";
   html2canvas(elm, { allowTaint: true }).then(function (canvas) {
   Canvas2Image.saveAsPNG(canvas, width, height);
  })
});

【讨论】：