1

我在一个 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>

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

4

1 回答 1

0

只需删除您不需要的东西。即，我有 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);

这应该工作

于 2013-07-29T09:08:57.400 回答