使用JavaScript爲畫布創建過濾器

我正在創建一個具有繪圖功能的插件，我想添加一個過濾器按鈕。現在，當從下拉列表中選擇「灰度」選項時，將調用名爲filterImage的函數。代碼中顯示的make_base函數只是將圖像加載到畫布中。目前圖像出現在畫布上，但不應用灰度。我會如何去做這件事？可以在同一個函數中調用make_base函數（放入圖像）和灰度濾鏡函數嗎？使用JavaScript爲畫布創建過濾器

var canvas = document.getElementById("art-board"); 
var context = canvas.getContext("2d"); 
var selectObj = document.getElementById("filter"); 
var index = selectObj.selectedINdex; 
var filter = selectObj[index].value; 
make_base(canvas, context); 

if(filter=="grayscale"){ 
    filterImage(canvas, context); 
} 

function filterImage(canvas, context){ 

    imageData = context.getImageData(0, 0, canvas.width, canvas.height), 
    data = imageData.data, 
    iLen = data.length; 

     for (i = 0; i < iLen; i+=4) { 
     avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2]; 
     data[i] = avg + 100; 
     data[i + 1] = avg + 50; 
     data[i + 2] = avg + 255; 
     } 

     context.putImageData(imageData, 0, 0);  

}

來源

2015-07-13 user3293643

一個錯誤您提供：'selectObj.selectedINdex;'應該被修改爲'selectObj.selectedIndex;'。另外，我假設你的make_base函數確實將圖像加載到一個'new Image（）'標記中，並且實際上只是在它的'onload'事件中將其繪製到畫布上。您的檢查過濾器應包含在此onload或畫布將是空的。 – Kaiido

不是100％確定，但我認爲你的循環存在問題。在代碼 I found working RGB values/code on HTML5Rocks

var r = d[i]; 
var g = d[i+1]; 
var b = d[i+2]; 
// CIE luminance for the RGB 
// The human eye is bad at seeing red and blue, so we de-emphasize them. 
var v = 0.2126*r + 0.7152*g + 0.0722*b; 
d[i] = d[i+1] = d[i+2] = v

來源

2015-07-13 05:03:50 RickyAYoder

使用JavaScript爲畫布創建過濾器

回答

相關問題