操作2個圖像數據對象在一起

基本上，我試圖爲我的畫布應用程序實現高通濾鏡。這個概念很簡單：將常規圖像像素減去模糊半徑爲x的同一圖像的像素。看似簡單吧？操作2個圖像數據對象在一起

var d = pixel.data; 
var blurdata = blur(amnt, pixel); 
var bd = blurdata.data; 
for (var i=0; i<d.length; i+=4) { 
    d[i] = 128+(d[i]-bd[i]); 
    d[i+1] = 128+(d[i+1]-bd[i+1]); 
    d[i+2] = 128+(d[i+2]-bd[i+2]); 
} 
return pixel;

該代碼運行2個參數，amnt和像素。 Pixel是ctx.getImageData對象，amnt是模糊半徑。 blur函數也返回一個imagedata對象。儘管模糊代碼不是問題。如預期那樣工作100％。問題是，似乎d和bd變量是相同的。我不知道爲什麼。當從d [i]中減去bd [i]時，結果爲0，當將數據添加到128時，將數據放回到畫布中時，結果爲完全灰色圖像。哦，模糊數據和像素數據具有相同的尺寸。

任何幫助真的很感激。

模糊函數：http://www.files.croar.net/f/9/

來源

2014-01-13 croar

上傳到JSFiddle？ – mjkaufer

不能。使用的庫過多，以及太多的代碼（如上傳示例圖像）放入一個jsfiddle中。我已經確定這個問題在代碼中的某處。似乎其中一個數據對象正在與另一個數據對象混淆，但我不知道爲什麼。 – croar

當我們看不到你是如何設置其他變量等的時候，很難單獨解決這個問題。我的建議是運行'console.log'，看看有沒有什麼不合理的。你記得做'canvas.putImageData'嗎？ – mjkaufer

您的數據是相同的，因爲您的數據是相同的。當您在模糊函數中模糊pixel.data時，它也會更改數組d中的值。你可能想要做的是製作兩個相同圖像的畫布。有d是未模糊的圖像的像素數據，然後模糊數據的其他圖像：

var composite = canvas1.getContext("2d").getImageData(); 
var d = composite.data; 
var blurdata = blur(amnt, pixel); 
var bd = blurdata.data; 
for (var i=0; i<d.length; i+=4) { 
    d[i] = 128+(d[i]-bd[i]); 
    d[i+1] = 128+(d[i+1]-bd[i+1]); 
    d[i+2] = 128+(d[i+2]-bd[i+2]); 
} 
return composite;

我認爲應該把工作做好。

來源

2014-01-13 06:45:38

太棒了，完美的作品。我仍然不完全確定它爲什麼會在模糊發生之前定義了相同的數據，但我會採用高通功能......感謝 – croar

它與JS的隱藏類型結構有關。當你創建var d時，它只是一個指向由composite.data引用的數組的指針。也就是說，它不會像創建新數組那樣創建新數組：var d = new Array（）; –

那麼有沒有辦法做到這一點，使複合材料。數據實際上進入一個單獨的變量？ @ zach-babb – croar

可以更改canvas.context對象的Alpha然後繪製的圖像對象在其上。通過使用API，您將加速操作，但我不相信它會利用任何硬件圖形芯片。

context.globalAlpha = ".5"; 
context.globalCompositeOperation = "source-over"; 
context.drawImage(My2ndCanvas,x,y);

globalCompositeOperation同樣對圖像的混合方式給予了一些控制。

來源

2014-01-13 03:29:59 Wayne

操作2個圖像數據對象在一起

回答

相關問題