Javascript 画布图像性能差
大家好，在我的情况下，我有一个大的目的地画布和一个小的屏幕外画布 屏幕外的低于100x100，而目标为5000x5000。当我调用drawImage将较小的画布复制到目标画布时，我会得到一个巨大的内存峰值，性能非常糟糕 我尝试将较小的画布转换为图像，这使性能在实际可使用的地方更快。唯一的问题是图像需要时间来加载，所以当onload被称为my canvas context changed时exif数据也可能被忽略，这将解释图像的不同方向 是否有一种方法可以从画布上下文中剥离属性，以便我可以保存和重置onload中的所有上下文属性 我尝试执行object.keys，但它总是返回空数组。我认为我剩下的唯一方法是直接在目的地上画画，而不是在屏幕外画画。这似乎更快，但我需要重做所有的计算 我还有别的选择吗 谢谢 下面的渲染函数每秒调用几次Javascript 画布图像性能差,javascript,canvas,fabricjs,Javascript,Canvas,Fabricjs,大家好，在我的情况下，我有一个大的目的地画布和一个小的屏幕外画布 屏幕外的低于100x100，而目标为5000x5000。当我调用drawImage将较小的画布复制到目标画布时，我会得到一个巨大的内存峰值，性能非常糟糕 我尝试将较小的画布转换为图像，这使性能在实际可使用的地方更快。唯一的问题是图像需要时间来加载，所以当onload被称为my canvas context changed时exif数据也可能被忽略，这将解释图像的不同方向 是否有一种方法可以从画布上下文中剥离属性，以便我可以保存和重
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.
}
所以我做了进一步的测试，实际上是阴影模糊导致了我使用像素画法时的速度减慢。如果没有模糊，阴影很快就会出现。问题似乎在于重复使用相同的屏幕外画布。如果我每次在新画布上调用drawImage，就像上面的例子一样。似乎没有内存泄漏或速度减慢。在drawImage中使用相同的屏幕外画布会导致内存泄漏吗？您不应该从内存峰值开始。这里可能出了点问题。你能和我分享一下这个问题吗？drawImage是在一张画布上画另一张画布的最自然、最优化的方式。所以我注释了整个函数。我只将第二个画布的创建留给document.createElement（“画布”）。然后我设置它的大小并直接调用drawImage（）。即使没有调用任何其他绘图函数，将空画布复制到目标画布的速度也非常慢。是否可以显示代码的工作示例？在您的问题中，您可以添加一个工作片段。或者有一些在线服务，比如@user6728767当您将较小的画布复制到目标画布时，您是否考虑过禁用
renderOnAddRemove