Fabric.js中的灰度很慢

Question

我不认为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);
  },

因此，如果不是罪犯，那么罪犯就是putImageData职能。

有没有办法增加/优化该功能，所以它适用于5000x5000图像，当然不到15秒？

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

Answer 1

如果putImageData占用的时间最多，那么你无法提高速度，因为它是浏览器提供的低级功能。

您可以做的是逐步处理图像并将其显示给用户，而不会直接阻止浏览器15秒。

提示：我建议您只使用Chrome开发者工具，而不是使用时间警报来计算脚本的执行时间。他们为javascript提供了一个很棒的分析工具，更具体地说，canvas drawing.

Answer 2

我对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<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);
    }
}