如何加快这个慢画布DrawImage操作？ WebGL的？ Webworkers？

Question

我目前正在将两个高分辨率图像组合成一个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-120ms。并且仅在每对图像被加载时执行一次。虽然这通常不会成为问题，但在这种情况下，动画会被渲染到另一个主要的可见画布（其中这些高分辨率图像是其中的源艺术），这些画面遭受了非常明显的100ms抖动（在firefox中大部分都是可感知的）每当新的源艺术作品流入，加载和组合时。

我正在寻找的是减少这种情况的方法。

这是我到目前为止所尝试的内容：

• 为Google Chrome实施了WebP，无需完全合并JPEG和PNG alpha掩码。仅适用于Chrome，但需要主要针对Firefox的解决方案（IE 10/11似乎可以更快地执行操作）
• 我尝试在网络工程师中加载图像并对它们进行解码，然后将它们组合起来。所有在纯JavaScript中。这种方法有效但速度太慢而无法使用。
• 我也尝试过使用WebP polyfills。 Weppy非常快，当在webworker中运行时不会影响主循环。然而，它不支持alpha透明度，所以没有用，这是一个真正的耻辱，因为这种方法非常接近。 libwebpjs在网络工作者中运行正常，但就像我手动解码JPEG / PNG一样，速度太慢。

编辑：进一步澄清。我尝试使用可传输对象从我的webworkers传输数据，甚至尝试将结果转换为blob并创建一个objectURL，然后可以由主线程加载。虽然主线程中不再存在延迟，但图像只需要很长时间才能解码。

这让我得到了WebGL。除了我意识到我需要将JPEG和PNG作为单独的纹理加载然后将它们与着色器结合使用时，我几乎不了解WebGL的工作原理。但我真的不知道从哪里开始。

我花了一些时间玩以下链接中的代码：

Blend two canvases onto one with WebGL

但无济于事。说实话，我担心将图像加载为纹理实际上可能需要比原始方法更长的时间。

总而言之，我真的在寻找一种加速高分辨率图像操作的方法。 （1920x1080 - 2048x2048）无论是使用WebGL还是其他任何方法。

非常感谢任何帮助或建议。