html2canvas 用于具有来自同一来源的多个图像的 html 页面答案

【问题标题】：html2canvas for html page with multiple images from same sourcehtml2canvas 用于具有来自同一来源的多个图像的 html 页面
【发布时间】：2013-03-14 19:29:18
【问题描述】：

我在一个 html 页面中有多个图像。我想使用 html2canvas 将页面转换为图像。图像是本地的并且来自同一来源。它总是不断显示错误消息 " 无法获取图像数据来自画布，因为画布已被跨域数据污染。”

相同的代码适用于一张图像或同一图像的多个副本。

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="language" content="de">
    <script type="text/javascript" src="./js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/html2canvas.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var target = $('#mainDiv');
        html2canvas(target, {
            onrendered: function(canvas) {
            var data = canvas.toDataURL();
            var img = document.getElementById('img1');
            img.src = data;
            }
        });
        });
  </script>
  </head>
  <body>
    <div id="mainDiv">
    <div id="div1" ><p>paragraph 1  paragraph 1  paragraph 1  paragraph 1  paragraph 1  paragraph 1  paragraph 1  paragraph 1  </p></div>
    <div id="div2" ><p>paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 paragraph2 </p></div>
    <img src="images/01.jpg" >
      <img src="images/02.jpg" >
      <img src="images/03.jpg" >
      <img src="images/04.jpg" >
    </div>
  <img id="img1"></img>
  </body>
</html>

我不确定错误消息是什么意思。另外，如果有人能告诉我如何使用多张图片进行此操作，那将非常有帮助

【问题讨论】：

标签： html2canvas

【解决方案1】：

只需删除您不需要的内容。即，我有 Div1、Div2 等

      function PrintChartCanvas(divId) {
            //div canvas
            var divObj = html2canvas($('#div' + divId));
            var divQueu = divObj.parse();
            var divCanvas = divObj.render(divQueu);
            divImg = divCanvas.toDataURL();

            return divImg;
        }

document.getElementById("img1").src = PrintChartCanvas(3);

这应该可行

【讨论】：