时间戳

首页 > 解决方案 > HTML2Canvas 5.0 不保存背景图片

javascript - HTML2Canvas 5.0 不保存背景图片

问题描述

我是第一次学习 JS 和前端开发。作为我项目的一部分，我想要一个按钮，按下时会将一段 html 转换为图片。对于这个任务，我决定使用 HTML2Canvas 库，因为我听说过很多关于它的好消息，而且它的设置看起来相当简单。

使用 HTML2Canvas 时，我似乎可以保存除背景图像之外的所有内容。在搜索有关此问题的信息时，其他人建议使用 5.0 构建而不是 4.1，但我仍然遇到此问题。谁能指出我正确的方向？

我的代码发布在下面。

HTML

<div class="myContainer" id="box") > </div>

<script src="https://github.com/niklasvh/html2canvas/releases/download/v0.5.0-beta4/html2canvas.js"></script>

<a href="#" onClick="saveIt()">save Image 1</a>

CSS

.myContainer {
    width:230px; height:230px; line-height:4em;
    border:5px solid green;
    }
    #box{
       background-image: url(https://source.unsplash.com/random/230x230)
    }

canvas {
  position: absolute;
  top: 0;
  left: 400px;
  visibility: hidden;
}

JS

var saveIt = function() {
  html2canvas(document.getElementById("box"
), {
  onrendered: function(canvas) {
      document.body.appendChild(canvas);
      leCanvas = document.getElementsByTagName("canvas")[0];
      var img  = leCanvas.toDataURL("image/png");
      document.write('<span style="font:14px normal Helvetica, Arial; font-weight: bold; color:#13a6f5; margin-left:16px">Saved html png:</span> <br /><img src="'+img+'"/>');
  },
  width: 1920,
  height: 1080
});
}

标签： javascripthtml2canvas

解决方案

推荐阅读