使用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为画布创建过滤器

回答

相关问题