以非UI方式执行HTML-> Canvas转换

Question

在GrapesJS Web模板编辑器中保存新模板后，我必须将iframe中的HTML转换为png并将其发送到服务器。项目位于Angular中。

尝试了多个库（html2canvas，html-to-image，...）之后，但大多数转换质量都很差（即CSS无法正确应用于画布）

因此，我决定继续使用rasterizeHtml，它可以可靠地渲染元素，但速度要慢得多（approx 5s-8s per render）。在此过程中，发生了很多资源请求（比整个过程花费的时间少了一些），我的目的我不完全了解，但可能很慢，因为它们确实要花费几秒钟。

库执行其操作时，UI线程被阻塞，因此无响应。应该发生的动画，不会发生的动画，用户无法与页面进行交互等。

我曾考虑过将流程移至Webworker中，但是由于Webworker无法访问窗口/文档对象，因此超出了窗口范围（双关语意）。

还有其他方法可以无阻塞地执行转换吗？还是至少强制UI更新以正确显示动画？我可能在做效率低下的事吗？

updatePreviewThumbnail() {
  const iframe = document.getElementsByTagName('iframe')[0];
  const body = iframe.contentDocument.getElementsByTagName('html')[0];
  const el = iframe.contentDocument.getElementById('wrapper').children[0];
  const size = el.getBoundingClientRect();

  const canvas: any = document.createElement('CANVAS');
  canvas.width = size.width;
  canvas.height = size.height;
  let isConverted = false;
  rasterizeHTML.drawHTML(body.innerHTML, canvas).then(() => {
    isConverted = true;

    let file: File;

    canvas.toBlob((blob) => {
      file = new File([blob], 'screenshot.png', {type: 'image/png'});
      this.editorService.uploadFileToAmazon(file).subscribe(() => noop());
    }, 'image/png', 1);
...
  });
}

任何帮助或技巧都将不胜感激，无论是另一个图书馆还是认为更好的结果都不可行，应该通过后端，saas进行转换...