Javascript Fabric.js中的灰度显示速度较慢

我不认为Fabric.js是这里的罪魁祸首，因为当我添加时间警报时只需要2-3秒。但是，下面是它使用的代码：

 applyTo: function(canvasEl) {
    var context = canvasEl.getContext('2d'),
        imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
        data = imageData.data,
        len = imageData.width * imageData.height * 4,
        index = 0,
        average;

    while (index < len) {
      average = (data[index] + data[index + 1] + data[index + 2]) / 3;
      data[index]     = average;
      data[index + 1] = average;
      data[index + 2] = average;
      index += 4;
    }

    context.putImageData(imageData, 0, 0);
  },

applyTo:function（canvasEl）{
var context=canvasEl.getContext（'2d'），
imageData=context.getImageData（0,0，canvasEl.width，canvasEl.height），
data=imageData.data，
len=imageData.width*imageData.height*4，
指数=0，
平均水平；
while（指数

因此，如果不是罪犯，那么罪犯就是

putImageData

函数

有没有办法增加/优化该功能，使其能够在15秒内处理5000x5000图像

---

如果没有，有没有办法设置一个“工作”图标，它只有在通过jQuery完成putImageData后才会被删除，因为目前，它在2秒钟后被删除，因为Fabric.js代码完成得更快？

我对Fabric.js不是很熟悉，但您在画布上进行优化的选项非常有限。将变量放在彼此的后面，而不是创建一个平均变量，将节省一点时间：

data[index] = data[index+1] = data[index+2] = (data[index] + data[index + 1] + data[index + 2]) / 3;
index+=4;

此外，您可能希望尝试将数据按行放置在画布上。它不会加快速度，但如果你有这么大的画布，向用户展示一些进展会很好。在下面的示例中，我这样做了，并将while循环更改为两个for循环，因为我更喜欢for循环：）

---

for（var i=0；i如果
putImageData
占用的时间最多，则无法提高其速度，因为它是浏览器提供的低级功能

您可以做的是逐步处理图像并将其显示给用户，而无需连续15秒阻塞浏览器

提示：与其用时间警报来计时脚本的执行，我建议只使用Chrome开发者工具。他们有一个很棒的评测工具，更具体地说

你需要使用JS和canvas吗，或者你的应用程序可以使用它吗？用户创建的图像会被保存起来供将来使用甚至打印，所以我猜这是唯一的方法。我的选项非常有限，图像大小也非常有限，所以只有特殊情况才会如此大。可以将其视为创建用于打印的传单。1.Ins除了一次获取/放置图像数据外，您还要执行5000×5000次，因此可能会进一步降低速度。2.Javascript将只执行整个循环，然后完全显示结果。要执行您想要的操作，您需要使用requestAnimationFrame在chuncks中，在多个帧（类似于使用requestAnimationFrame）上精细化/显示图像
for(var i=0;i<imageData.height;i++) {
    var row = context.getImageData(0, i, canvasEl.width, 1);
    for(var j=0;j<imageData.width*4;j+=4) {
        row.data[index] = row.data[index+1] = row.data[index+2] = (row.data[index] + row.data[index + 1] + row.data[index + 2]) / 3;
        context.putImageData(row, 0, i);
    }
}