Angular 如何将div转换为图像？_Angular

Angular 如何将div转换为图像？

angular

Angular 如何将div转换为图像？,angular,Angular,我有一个div，我需要制作这个div的映像并发送到服务器。使用Angular 7有什么办法吗？我试图搜索图书馆，但没有结果。所有的解决方法都使用原生JS。要将HTML内容保存到图像中，您需要使用HTML2CANVAS库创建一些引用子对象 @ViewChild（'screen'）屏幕：ElementRef； @ViewChild（“画布”）画布：ElementRef； @ViewChild（'downloadLink'）downloadLink:ElementRef 当然，您需要添加HTML引用

我有一个div，我需要制作这个div的映像并发送到服务器。使用Angular 7有什么办法吗？我试图搜索图书馆，但没有结果。所有的解决方法都使用原生JS。

要将HTML内容保存到图像中，您需要使用

HTML2CANVAS

库

创建一些引用子对象

@ViewChild（'screen'）屏幕：ElementRef；
@ViewChild（“画布”）画布：ElementRef；
@ViewChild（'downloadLink'）downloadLink:ElementRef
当然，您需要添加HTML引用，如
<table #screen id="table" class="table table-striped">...

<div id="download">
  <img #canvas>
  <a #downloadLink></a>
</div>

我认为这个插件会对你有所帮助

例如：-
downloadImage(){

html2canvas(this.screen.nativeElement).then(canvas => {
      this.canvas.nativeElement.src = canvas.toDataURL();
      this.downloadLink.nativeElement.href = canvas.toDataURL('image/png');
      this.downloadLink.nativeElement.download = 'marble-diagram.png';
      this.downloadLink.nativeElement.click();
});

}


将Div转换为图像
帆布{
宽度：100%！重要；
}
#html内容持有者{
背景色：#f0f1；
颜色：#00cc65；
宽度：500px；
左侧填充：25px；
填充顶部：10px；
}
将div转换为图像
关于我们

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个非常好的例子
在hic实践中，是否有必要对eos进行评估？铜酸盐。


洛雷姆，伊普苏姆·多洛坐在一位杰出的领袖面前。人的健康状况
可选择的实验室是否能阻止它的产生？福加速递速递服务减去流动资金
不可否认的事实。

图片预览
&时代；
$（文档）.ready（函数（）{
//全局变量
var元素=$（“#html内容持有者”）；
//全局变量
var getCanvas；
$（“#btn预览图像”）。在（'单击'，函数（）{
html2canvas（元素{
onrendered：函数（画布）{
$（“#预览图像”）.empty（）；
$（“#预览图像”）.append（画布）；
getCanvas=canvas；
}
});
});
$（“#btn-Convert-Html2Image”）。在（'click'，函数（）{
伊姆加格达塔酒店=
getCanvas.toDataURL（“image/png”）；
//现在浏览器开始下载
//而不是仅仅展示它
var newData=imgageData.replace(
/^数据：image\/png/，“数据：应用程序/八位字节流”）；
$（“#btn-Convert-Html2Image”）.attr(
“下载”，“geeksforgeks.png”）.attr(
“href”，新数据）；
});
}); 
为什么要将div转换为image？你们不能直接使用图像吗？我有一个使用特定库的树形图，我需要将它保存为图像以添加到数据库中。此外，此图像将用于形成pdf报告
<!DOCTYPE html>
<html>

<head>
  <title>Convert Div Into Image</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">
  </script>
  <style>
    canvas {
      width: 100% !important;
    }

    #html-content-holder {
      background-color: #F0F0F1;
      color: #00cc65;
      width: 500px;
      padding-left: 25px;
      padding-top: 10px;
    }
  </style>
</head>

<body>
  <center>
    <h2 style="color:purple"> Convert div to image</h2>
    <div id="html-content-holder">
      <h3 style="color: #3e4b51;">ABOUT US</h3>
      <p style="color: #3e4b51;">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt et quae debitis, fugiat est amet ipsa
        aspernatur iure aut in hic exercitationem tenetur eos assumenda magni pariatur sunt delectus? Cupiditate.
      </p>

      <p style="color: #3e4b51;" class="p-3">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum consequuntur doloremque aliquam aperiam
        optio laboriosam reiciendis hic id impedit eligendi? Fuga expedita reprehenderit sequi dicta minus aliquid porro
        incidunt iure.
      </p>
    </div>

    <input type="button" id="btn-Preview-Image" value="Preview" class="btn btn-primary" data-toggle="modal"
      data-target="#exampleModal" />

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Image Preview</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="previewImage">
          </div>
          <div class="modal-footer">
            <a id="btn-Convert-Html2Image" href="#" type="button" class="btn btn-primary">
              Download
            </a>
          </div>
        </div>
      </div>
    </div>
  </center>
  <script>
    $(document).ready(function () {

      // Global variable 
      var element = $("#html-content-holder");

      // Global variable 
      var getCanvas;

      $("#btn-Preview-Image").on('click', function () {
        html2canvas(element, {
          onrendered: function (canvas) {
            $("#previewImage").empty();
            $("#previewImage").append(canvas);
            getCanvas = canvas;
          }
        });
      });

      $("#btn-Convert-Html2Image").on('click', function () {
        var imgageData =
          getCanvas.toDataURL("image/png");

        // Now browser starts downloading  
        // it instead of just showing it 
        var newData = imgageData.replace(
          /^data:image\/png/, "data:application/octet-stream");

        $("#btn-Convert-Html2Image").attr(
          "download", "GeeksForGeeks.png").attr(
            "href", newData);
      });
    }); 
  </script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</body>

</html>