1

html ページに複数の画像があります。html2canvas を使用してページを画像に変換したいです。画像はローカルで同じソースからのものです。常にエラー メッセージ 「 Unable to get image data from canvas because the canvas has hasクロスオリジンデータによって汚染されています。」

同じコードは、1 つの画像または同じ画像の複数のコピーに対して機能します。

<!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 に答える