1

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

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）也会导致它挂起几秒钟。有没有更快的方法来解决这个问题？

4

3 回答 3

2

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

所以我的建议是尝试重新制作该功能，甚至不触及getImageDataandputImageData功能。没用的。我会按照以下方式制作：

  1. 获取 处的像素坐标mouse down。
  2. 为mouse move.
  3. 在原始图像上创建一个半透明图像，并使用该fillRect函数绘制到创建的画布中。
  4. 为mouse up.
  5. 获取 处的像素坐标mouse up。
  6. 计算得到的正方形的坐标。
  7. 使用正方形坐标作为参数将生成的图像绘制到画布中。
  8. 作为最后一步，将画布的内容绘制到图像上。

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

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

于 2012-12-21T10:48:05.403 回答
0

当您必须使用用户定义的形状时，没有真正的方法可以加快速度，但可以通过工人来处理陷入困境。

于 2013-01-06T08:37:21.857 回答
0

一些想法：

限制getImageData在用户绘制的多边形的边界框内。

Putdata.height等data.width在变量的循环内使用。

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

甚至可能将多边形绘制为黑白imagedata对象，然后得到两者之间的区别？

能分享一下isPointInPath(x,y)功能吗？

于 2013-01-29T21:20:51.080 回答