angular - 如何将编辑器内容导出为图像

Question

我正在使用 ngx-quill 创建模板设计器，我希望能够将编辑器的内容导出为图像。我可以成功地将内容导出为 HTML 和 PDF，但找不到将其导出为图像的方法。

Answer 1

您必须使用 html2canvas，因为 Quill 不提供任何内置方式将其内容导出为图像。

您唯一需要做的就是在您的quill-editor元素上添加一个引用：

<quill-editor #screen 
              format="html" 
              [modules]="quillConfig" 
              placeholder="Some text...">
</quill-editor>

<div class="btn btn-primary" 
     (click)="downloadImage()">DL</div>

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

并在您的组件中捕获它，然后处理和渲染图像：

  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;

  downloadImage(){
    html2canvas(document.querySelector('.ql-editor')).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();
    });
  }

这是一个使用 html2canvas 和 ngx-quill 的工作示例

所以对于这个内容：

您将获得以下导出的图像：

PS：不要忘记添加yarn add html2canvas和yarn add --dev @types/html2canvas。