Question

我在html页面中有多个图像。我想使用html2canvas将页面转换为图像。图像是本地的，来自同一个源。它始终显示错误消息msg “无法获取图像数据来自画布，因为画布已被交叉原始数据污染。“

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

<!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>

我不确定错误消息是什么意思。如果有人能告诉我如何使用多个图像进行此工作，那将非常有用

Answer 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）;

这应该有效

html2canvas用于html页面，包含来自同一来源的多个图像

1 个答案: