角11 -如何将html转换为jpeg图像

Question

我尝试使用以下代码

const element = document.getElementbyId('myid'); // it takes little long to render
htmlToImage.jpeg(element, { quality: 0.95 })
      .then((dataUrl) => {
        console.log(dataUrl); // this prints only data:,
})

因为dataUrl是空白的，所以图像是空白的。所以我试着用htmlToCanvas

 html2canvas(element).then(function (canvas) {
      // Convert the canvas to blob
      canvas.toBlob(function (blob) {
    
  })

但是我得到了一个错误Error loading image http://localhost:4200/

何将HTML元素转换为图像文件？

Answer 1

步骤1-创建一个新的角11应用程序步骤2-安装HTML到图像包步骤3-将HTML添加到视图文件步骤4-在组件.ts文件中添加代码步骤5-运行角应用程序

<div id="image-section">
  <h1>Hello world!</h1>
</div>
 
<button type="button" (click)="generateImage()">Create Image</button>

ts=>

import { Component } from '@angular/core';
import * as htmlToImage from 'html-to-image';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-new-app';
 
  generateImage(){
    var node:any = document.getElementById('image-section');
    htmlToImage.toPng(node)
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
  }
}