使用worker异步处理canvas

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

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

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

http://ps.ahaoboy.com/

up-507c5a036cd02be9a9c58644a9d313030b2.png

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

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

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

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
加速 Canvas 波形的绘制速度可以通过以下几种方式进行优化: 1. 使用离屏 Canvas 当需要绘制较为复杂的波形时,可以先将波形绘制在一个离屏 Canvas 上,然后再将结果绘制到主 Canvas 上。这种方式可以减少主 Canvas 的绘制量,从而提高绘制速度。具体实现可以参考以下代码: ``` // 创建离屏 Canvas var offscreenCanvas = document.createElement('canvas'); offscreenCanvas.width = 1000; offscreenCanvas.height = 500; var offscreenCtx = offscreenCanvas.getContext('2d'); // 绘制波形到离屏 Canvas 上 for (var i = 0; i < data.length; i++) { // 绘制数据点到离屏 Canvas 上 // ... } // 将离屏 Canvas 上的内容绘制到主 Canvas 上 ctx.drawImage(offscreenCanvas, 0, 0); ``` 在上述代码中,`offscreenCanvas` 即为离屏 Canvas,`offscreenCtx` 是其对应的 Canvas 2D 上下文对象。在绘制波形时,可以将数据点绘制到离屏 Canvas 上,最后再将整个离屏 Canvas 绘制到主 Canvas 上。 2. 使用缓存 如果需要频繁地绘制相同的波形,可以考虑使用缓存来提高绘制速度。具体实现可以参考以下代码: ``` // 定义波形缓存 var waveformCache = null; // 绘制波形 function drawWaveform() { // 如果波形缓存不存在,则创建缓存并绘制波形 if (!waveformCache) { // 创建缓存 Canvas waveformCache = document.createElement('canvas'); waveformCache.width = 1000; waveformCache.height = 500; var cacheCtx = waveformCache.getContext('2d'); // 绘制波形到缓存 Canvas 上 for (var i = 0; i < data.length; i++) { // 绘制数据点到缓存 Canvas 上 // ... } } // 将波形缓存绘制到主 Canvas 上 ctx.drawImage(waveformCache, 0, 0); } ``` 在上述代码中,`waveformCache` 即为波形缓存,用于存储已经绘制好的波形。在绘制波形时,如果缓存不存在,则先创建缓存并绘制波形,否则直接将缓存绘制到主 Canvas 上。 3. 使用 Web Worker 如果需要绘制大量数据点的波形,可以考虑使用 Web Worker 来进行异步绘制,从而提高绘制速度。具体实现可以参考以下代码: ``` // 创建 Web Worker var worker = new Worker('waveformWorker.js'); // 向 Worker 发送消息 worker.postMessage(data); // 在主线程中监听 Worker 的消息 worker.onmessage = function(event) { // 接收绘制完成的数据并绘制到主 Canvas 上 var waveformData = event.data; for (var i = 0; i < waveformData.length; i++) { // 绘制数据点到主 Canvas 上 // ... } }; ``` 在上述代码中,`waveformWorker.js` 是 Web Worker 的脚本文件,用于异步绘制波形。在主线程中,可以使用 `worker.postMessage()` 方法向 Worker 发送消息,并通过 `worker.onmessage` 监听 Worker 的返回消息。在 Worker 中,可以使用 `self.postMessage()` 方法向主线程发送消息,完成绘制后再由主线程将数据绘制到主 Canvas 上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值