Question

大家好，在我的情况下，我有一个大的目标画布和一个小的屏幕外画布。

屏幕外的是100x100，而目标的是5000x5000。当我调用drawImage将较小的画布复制到目标画布时，我得到了巨大的内存峰值并且性能非常糟糕。

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

有没有办法从画布上下文中删除属性，以便我可以保存并重置onload中的所有上下文属性？

我尝试做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

问题似乎来自重复使用相同的屏幕外画布。如果我每次都像上面的例子那样在新画布上调用drawImage。似乎没有内存泄漏或减速。是否有任何理由在drawImage中使用相同的屏幕外画布会导致内存泄漏？

Canvas drawImage性能不佳

1 个答案: