Question

我正在处理一个简单的图像裁剪，用户在他们想要保留的区域周围画一条线。当他们确认时，图像的其余部分将被裁剪掉。以下是我目前处理裁剪的方法：

var data = c.getImageData(0,0,canvas.width,canvas.height);      
for (var x = 0; x < data.width; x++) {
   for (var y = 0; y < data.height; y++) {
      if (!c.isPointInPath(x,y)) {
         var n = x + (data.width * y);
         var index = n*4; 
         data.data[index+3] = 0;
      }
   }
}

然而，这可能会很快陷入困境。您尝试保留的图像越少，它就越快，但即使保存30％的图像（画布为800x800）也会导致它挂起几秒钟。有更快的方法吗？

Answer 1

我真的不明白为什么要深入了解像素细节以操纵裁剪图像功能。这是可以理解的，因为需要更多的时间来裁剪图像的其余部分，因为实际上通过迭代二维像素阵列，操作所需的处理时间随着大小的增加而呈指数增长。像素图。

所以我的建议是尝试重新制作该功能，而不要触及getImageData和putImageData功能。这毫无用处。我会用以下方式做出：

获取mouse down。
为mouse move创建一个事件监听器。
在原始图像上创建半透明图像，并使用fillRect函数绘制到创建的画布中。
为mouse up创建一个事件监听器。
获取mouse up。
计算得到的正方形的坐标。
使用方形坐标作为参数将结果图像绘制到画布中。
最后一步是将画布的内容绘制成图像。

这样，您将在图像裁剪处理上节省大量开销。

以下是供您参考的脚本：https://github.com/codepo8/canvascropper/blob/master/canvascrop.js

Answer 2

当你必须使用用户定义的形状时，没有真正的方法来加速它，但是可以用工人来处理停滞。

Answer 3

一些想法：

将getImageData限制为用户绘制的多边形的边界框。

将循环内使用的data.height，data.width等放在变量中。

也许您可以拆分内部/外部测试并设置imagedata alpha值。

甚至可以将多边形绘制成黑白imagedata对象，然后得到两者之间的差异？

您可以分享isPointInPath(x,y)功能吗？

加速画布图像裁剪

3 个答案: