使用worker异步处理canvas

原文链接: 使用worker异步处理canvas

上一篇: worker中创建文件, 在页面中使用

下一篇: webpack worker-loader 引入worker文件

http://ps.ahaoboy.com/

将左侧的输入canvas的处理放入canvas中, 如果已经有了一个执行任务, 则直接终止worker, 重新创建一个worker开始执行, 这样可以减少算力消耗

之所以不能在执行过程中禁止用户操作, 是因为这个禁止的体验不是很好, 因为如果用户操作了, 表示你正在进行的计算是无用的, 因为用户想看到的其实是最新的操作反馈

加入png检测, 如果所有图片都是jpg, 则关闭png导出, 加速图片生成

在绘制的时候, 防止worker绘制进行到一半就将worker干掉的行为, 要么在worker中创建新的画布, 只导出转换后的url, 要么保证worker中的绘制要么全部完成, 要么就没开始

对于最终图片的旋转, 只需要旋转拼接后的canvas即可, 不用重新走拼接的逻辑, 也就是 拼接后的canvas, 和拼接后旋转的canvas是独立的

transferControlToOffscreen 将页面中的canvas控制权转移到worker中时, 只能转换一个worker中