将html视图转换为图像 - Convert html view to a image

Convert html view to a image

本文关键字：图像转换视图 html | 更新日期: 2023-09-27

我想将html视图转换为图像。这是div代码

<html>
<div class="row">
<!--image div -->
<div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
convert this div to a image.</div></div>
</html>

我想把这个HTML视图转换成一个图像。有人知道吗?

您可以使用 html2canvas 库:

function convertImg() {
  html2canvas(document.querySelector('.row'), {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    }
  });
}
$('button').click(convertImg);

.row > div {
  background: red;
  color: white;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<button>Convert page as img.</button>
<div class="row" style='height:260px; position:relative; top:10px;'>
  <div id="imgspace1" class="container cropit-image-preview1" class="col-md-12" style="border: 1px solid black; height: 250px; position: absolute; top: 10px; right: 10px; left: 10px; background-size: cover;">
    convert this div to a image.</div>
</div>

有一个库可以将HTML转换为HTML- canvas。这个画布可以保存为一个图像之后。查看示例:

http://html2canvas.hertzen.com/