Как экспортировать содержимое редактора как изображение

Question

Я использую ngx-quill для создания дизайнера шаблонов и хочу иметь возможность экспортировать содержимое редактора в виде изображения. Я могу успешно экспортировать содержимое в формате HTML и PDF, но не смог найти способ экспортировать его в виде изображения.

Answer 1

Вы должны использовать html2canvas, поскольку Quill не предоставляет никакого встроенного способа экспорта его содержимого в виде изображения.

Единственное, что вам нужно сделать, это добавить ссылку на ваш quill-editor element:

<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 -квилл

Итак, для этого содержания:

Вы получите следующее экспортированное изображение:

PS: не забудьте добавить в yarn add html2canvas и yarn add --dev @types/html2canvas.