domToPng 执行过程会阻塞 UI 线程渲染

[jianghai]

执行 domToPng 前，react render 执行渲染，会有很长延迟

[qq15725]

大部分 CPU 占用是由于 window.fetch 获取图像和字体资源导致的，可以试试走 WebWorker 是否有改善

import { domToPng } from 'modern-screenshot'
// use vite
import workerUrl from 'modern-screenshot/worker?url'

domToPng(document.querySelector('#app'), {
  workerUrl,
  workerNumber: 1,
})

[Flourad]

@qq15725 这个import会报错

[qq15725]

@qq15725 这个import会报错

?url 是 Vite 支持的

你可以选择把 worker.js 下载下来放到工程资产中，然后填写同域的 http url

CDN

https://unpkg.com/modern-screenshot/dist/worker.js

[Flourad]

@qq15725 好的 非常感谢～ 请教一个问题，这个库支持ignore特定的dom么？ 类似html2canvas里的data-html2canvas-ignore或者ignoreElements

[qq15725]

@Flourad https://github.com/qq15725/modern-screenshot/blob/v4.4.31/src/options.ts#L46

[Flourad]

放在本地后，不能这样直接引入么？ import workerUrl from './worker'; 我明白了～这里是需要一个worker的url

[Flourad]

求问，有没有vue项目本地引入web worker的实践，没有接触过web worker～如果放在目录下，好像js文件会被打包～ @qq15725

[qq15725]

@Flourad 例如放 public/js/worker.js 下，workerUrl 填写 /js/worker.js 这样

[Flourad]

改成这样，截图没反应，好像不会被执行

[Flourad]

这种报错是正常的么？

[Flourad]

改成这样，截图没反应，好像不会被执行

这个解决了，本地配置的问题，但是加了web worker之后 还是有点卡

[qq15725]

目前最后一步解码 svg+xml 成图像的部分无法在 WebWorker 中完成。

如果你截图 body 这种，可以查看下 svg+xml 的请求的大小，越大解码时间越久（过大会导致卡顿）。

可以尝试 font: false 先屏蔽字体的内嵌（一般来说会减少挺多大小）

[Flourad]

目前最后一步解码 svg+xml 成图像的部分无法在 WebWorker 中完成。

如果你截图 body 这种，可以查看下 svg+xml 的请求的大小，越大解码时间越久（过大会导致卡顿）。

可以尝试 font: false 先屏蔽字体的内嵌（一般来说会减少挺多大小）

这样会导致我的iconfont那些图标都没办法显示

[lstoryc]

改成这样，截图没反应，好像不会被执行

这个解决了，本地配置的问题，但是加了web worker之后 还是有点卡

大佬能分享下如何解决的？ @Flourad

[AlexAgustini]

Does someone know how to incorporate a Web Worker in Angular ?