javascript - Canvas DrawImage 性能不佳

Question

大家好，就我而言，我有一个大的目标 Canvas 和一个小的屏幕外 Canvas 。

屏幕外的分辨率低于 100x100，而目标的分辨率为 5000x5000。当我调用drawImage将较小的 Canvas 复制到目标 Canvas 时，我得到了巨大的内存峰值，并且性能很糟糕。

我尝试将较小的 Canvas 转换为图像，这使得实际使用时的性能更快。唯一的问题是图像需要时间来加载，因此当调用 onload 时，我的 Canvas 上下文发生了变化。 --- exif 数据也可能被忽略，这可以解释图像的不同方向。

有没有办法从 Canvas 上下文中剥离属性，以便我可以保存并重置加载中的所有上下文属性？

我尝试执行 object.keys 但它总是返回一个空数组。我认为我剩下的唯一方法是直接在目的地上绘制，而不是在屏幕外绘制。它似乎更快，但我需要重做所有计算。

我还可以尝试其他替代方案吗？

谢谢!

下面的渲染函数每秒调用几次。

fabObject._render = function(ctx) {
  var canvas = document.createElement('canvas');
  canvas.width = 100;
  canvas.height = 100;
  var ctx2 = canvas.getContext('2d');
  myDrawFn() //this function draws to the new canvas. Performance is the same with this function commented or uncommented
  ctx.drawImage(ctx2, 0,0)// This line causes performance to be terrible. I tried converting ctx2 to an image first and passing it in but the onload places the image in the wrong orientation. I'm guessing its not using the exif data.

} 

更新:我还尝试对每个像素执行 fillRect，这也快得多。然而，当我应用阴影属性时，它变得非常慢。我假设这是由于阴影具有高像素密度，但我不确定。

所以我做了进一步的测试，实际上是阴影模糊导致了当我使用像素绘制方法时速度变慢。没有模糊，阴影很快就会出现。

Answer 1

问题似乎是由于重复使用相同的屏幕外 Canvas 造成的。如果我每次都在新 Canvas 上调用drawImage，就像上面的例子一样。似乎没有内存泄漏或速度减慢。在drawImage中使用相同的离屏 Canvas 是否有任何原因会导致内存泄漏？