html2canvas для html-страницы с несколькими изображениями из одного источника

Question

html2canvas для html-страницы с несколькими изображениями из одного источника

У меня есть несколько изображений на 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>

Я не уверен, что означает сообщение об ошибке. Также, если кто-то может сказать мне, как мне сделать эту работу с несколькими изображениями, это будет очень полезно

1

html2canvas

Источник

user520951 14 мар '13 в 19:29

1 ответ

Другие вопросы по тегам html2canvas

user514987 29 июл '13 в 09:08 2013-07-29 09:08 · Answer 1 · 2013-07-29 09:08

Просто удалите то, что вам не нужно. то есть у меня есть 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);

Это должно работать