我目前正在将两个高分辨率图像组合成一个 html5 画布元素。
第一个图像是 JPEG 并包含所有颜色数据，第二个图像是 alpha 蒙版 PNG 文件。
然后我将两者结合起来生成一个 RGBA 画布。
该应用程序正在处理 2048x2048 分辨率的图像，这些图像还需要维护其 Alpha 通道。因此，通过使用这种方法而不是简单地使用 PNG，我将平均文件大小从大约 2-3mb 减少到 50-130kb 加上 10kb png alpha 掩码。
我使用的方法如下：
context.drawImage(alpha_mask_png, 0, 0, w, h);
context.globalCompositeOperation = 'source-in';
context.drawImage(main_image_jpeg, 0, 0, w, h);
不幸的是，这个操作大约需要 100-120 毫秒。并且在每对图像加载时只执行一次。虽然这通常不是问题，但在这种情况下，动画被渲染到另一个主要的可见画布（这些高分辨率图像是其中的源艺术），该画布会出现非常明显的 100 毫秒抖动（主要在 Firefox 中可察觉）每当新的源艺术流入、加载和组合时。
我正在寻找的是一种减少这种情况的方法。
这是我到目前为止所尝试的：
- 为 Google chrome 实现了 WebP，不再需要完全组合 JPEG 和 PNG alpha 掩码。仅在 Chrome 中完美，但主要需要针对 Firefox 的解决方案（IE 10/11 似乎执行操作要快得多）
- 我尝试将图像加载到网络工作者中并对其进行解码，然后将它们组合起来。全部使用纯 JavaScript。这可行，但速度太慢而无法使用。
- 我也尝试过使用 WebP polyfills。Weppy非常快，并且在 webworker 中运行时不会影响主循环。但是它不支持 alpha 透明度，所以没有用，这真是太可惜了，因为这种方法非常接近。libwebpjs在 webworker 中可以正常工作，但就像我手动解码 JPEG/PNG 一样，速度太慢了。
编辑：进一步澄清。我尝试使用可传输对象从我的网络工作者传输数据，甚至尝试将结果转换为 blob 并创建一个 objectURL，然后可以由主线程加载。尽管主线程中不再有延迟，但图像的解码时间太长了。
这给我留下了 WebGL。除了我意识到我需要将 JPEG 和 PNG 作为单独的纹理加载然后将它们与着色器结合起来之外，我实际上对 WebGL 的工作原理一无所知。但我真的不知道从哪里开始。
我花了一些时间从以下链接玩代码：
但无济于事。老实说，我担心将图像加载为纹理实际上可能比我原来的方法花费更长的时间。
总而言之，我真的在寻找一种加快高分辨率图像操作的方法。（1920x1080 - 2048x2048）无论是使用 WebGL 还是任何其他方法。
任何帮助或建议将不胜感激。