加速畫布圖像作物

我正在研究一個簡單的圖像作物，用戶在他們想要保留的區域周圍用鼠標畫一條線。當他們確認後，圖像的其餘部分將被裁剪掉。以下是我目前如何處理裁剪：加速畫布圖像作物

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

加速畫布圖像作物

回答

相關問題