Question

基本上，我正在尝试为我的canvas应用程序实现高通过滤器。这个概念很简单：将常规图像像素减去半径为x的相同图像的像素。看起来很简单，对吧？

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。 Pixel是ctx.getImageData对象，amnt是模糊半径。 blur函数也返回imagedata对象。然而，模糊代码不是问题。这按预期工作100％。问题是，似乎d和bd变量是相同的。我不知道为什么。当从d [i]中减去bd [i]时，结果为0，当将数据添加到画布时，当将其添加到128时，将产生完全灰色的图像。哦，模糊数据和像素数据具有相同的尺寸。

任何帮助都非常感激。

模糊功能：http://www.files.croar.net/f/9/

Answer 1

您的数据是相同的，因为您的数据是相同的。当您在模糊函数中模糊pixel.data时，它也会更改数组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;

我认为应该完成工作。

Answer 2

您可以更改canvas.context对象的alpha，然后在其上绘制图像对象。通过使用API，您将加快操作，但我不相信它利用任何硬件图形芯片。

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

globalCompositeOperation还可以控制图像的混合方式。

一起操作2个图像数据对象

2 个答案: