加速画布图像作物

我正在研究一个简单的图像作物，用户在他们想要保留的区域周围用鼠标画一条线。当他们确认后，图像的其余部分将被裁剪掉。以下是我目前如何处理裁剪：加速画布图像作物

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

来源

2012-12-21 Fibericon

没有加快步伐的时候，你必须使用一个用户定义的形状真实的方式，但陷入停顿可以用一个工人来处理。

来源

2013-01-06 08:37:21 Fibericon

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

所以我的建议是尝试重拍该功能，甚至不要触摸getImageData和putImageData函数。没用的。我将按以下方式制作：

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

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

这是给你参考的脚本：https://github.com/codepo8/canvascropper/blob/master/canvascrop.js

来源

2012-12-21 10:48:05

我不使用标准裁剪的原因是我希望用户能够绘制自由形式的裁剪，而不仅仅是一个矩形。 – Fibericon

一些想法：

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

把data.height，data.width等在循环内部用在一个变量中。

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

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

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

来源

2013-01-29 21:20:51

加速画布图像作物

回答

相关问题