Question

我有一个div，我需要制作该div的图像并将其发送到服务器。有什么方法可以使用Angular 7做到这一点？我试图搜索图书馆，但没有结果。所有解决方法都使用本机JS。

Answer 1

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

创建参考孩子

@ViewChild('screen') screen: ElementRef; @ViewChild('canvas') canvas: 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();
});

}

Working Stackblitz

Answer 2

我认为该插件会为您提供帮助。

http://html2canvas.hertzen.com/

示例：-

<!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>

如何将div转换为图像？

2 个答案: