HTML2canvas и Canvas2image, загруженный скриншот не показывает мои HTML-изображения

Question

Я работал над страницей HTML, которую я хочу преобразовать в изображение.

Я использовал сценарии html2canvas и canvas2image и взял этот код http://jsfiddle.net/8ypxW/3/, который позволил мне создать кнопку, которая сделает снимок экрана и загрузит мою HTML-страницу в виде изображения.

Проблема, с которой я столкнулся, заключается в том, что на моем скачанном снимке экрана отображается мой текст, но не мое изображение, даже если они одного происхождения. Я не уверен, что это проблема с моим HTML, HTML2canvas или canvas2image.

Мой пример еще не запущен, но мой код приведен ниже:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>



<div id="wrapper" style="background-color: white"; width="1000px" height="900px">

<img src="header.jpg" width= "900px">
tecno diagnostics


</div><!---- End Wrapper ---->


<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>


<script type="text/javascript">
$(function() { 
  $("#btnSave").click(function() { 
    html2canvas($("#wrapper"), {
        onrendered: function(canvas) {
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
    });
});
}); 
</script>

Если кто-то может помочь мне или указать мне в правильном направлении, это будет высоко ценится.

заранее спасибо

Answer 1

document.querySelector('button').addEventListener('click', function() {
  html2canvas(document.querySelector('.specific'), {
    onrendered: function(canvas) {
      // document.body.appendChild(canvas);
      return Canvas2Image.saveAsPNG(canvas);
    }
  });
});

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
  padding-left: 15px;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
h1 {
  font-size: 36px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small {
  font-size: 65%;
  font-weight: 400;
  line-height: 1;
  color: #777;
  display: block;
  padding-top: 15px;
}
.specific {
  background-color: #fff;
}
p a {
  padding: 5px;
}

<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
  <h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1> 
  <p>This is a simple demo.</p>
  <p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
  <button type="button" class="btn btn-default">Take a Screenshot!</button>
  <p>References: <a href="http://html2canvas.hertzen.com/">html2canvas.js</a><a href="https://github.com/SuperAL/canvas2image">canvas2image.js</a>
  </p>
</div>

Рабочая демонстрация с использованием html2canvas.js & canvas2image.js:

Нажмите, чтобы сделать снимок экрана и скачать его локально!

Answer 2

Вы добавляете canvas возражать против DOM, что не имеет большого смысла в этом случае. Вы либо хотите преобразовать визуализированное изображение в base64, а затем добавить его в DOM в теге img, либо просто вызвать метод saveAsPng() для сохранения изображения в файловой системе.

Попробуйте это, если вы хотите добавить изображение в DOM:

html2canvas(element, {
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/png");
      $('body').append('<img src="'+img+'"/>');
    }
  });

Или это, если вы хотите сохранить его.

$(function() { 
  $("#btnSave").click(function() { 
      html2canvas(document.body, {
          onrendered: function(canvas) {
              return Canvas2Image.saveAsPNG(canvas);
          }
      });
  })
});

Не попробовал второй фрагмент, но он должен работать.