Javascript像素操作画布,模糊滤镜不工作
Javascript pixel manipulation of canvas, Blur filter not working
我目前正在制作一个简单的画板网站。
http://webbox.cs.du.edu/ansbashe/My_Art myart.html
我想用这个javascript代码模糊画布(在一个网络工作者)。问题是,返回的数据填充画布与原始图片,而不是我所期望的模糊的图像。我能做些什么来得到我想要的结果吗?
var filter = [ [1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1]];
var factor = 1/9;
var bias = 0;
var w = 890;
var h = 400;
function filts() {
filt = 0;
for(var x = 0; x < w; x++)
{
for(var y = 0; y < h; y++)
{
var r = 0;
var g = 0;
var b = 0;
var imgX = ((x - Math.floor(filter.length/2)+filterX + w) % w);
var imgY = ((y - Math.floor(filter.length/2)+filterY + h)%h);
for(var filterX = 0; filterX < filter.length; filterX++) {
for(var filterY =0; filterY < filter.length; filterY++) {
r += imgData.data[imgX*4 + imgY * w * 4] * filter[filterY][filterX];
g += imgData.data[imgX*4 + imgY*w*4 + 1] * filter[filterY][filterX];
b += imgData.data[imgX*4 + imgY*w*4 + 2] * filter[filterY][filterX];
}
}
var index = (x + (y * w)) * 4;
retData.data[imgX*4 + imgY*w*4] = Math.min(Math.max(Math.floor(factor *r + bias),0),255);
retData.data[imgX*4 + imgY*w*4 + 1] = Math.min(Math.max(Math.floor(factor *g + bias),0),255);
retData.data[imgX*4 + imgY*w*4 + 2] = Math.min(Math.max(Math.floor(factor *b + bias),0),255);
retData.data[imgX*4 + imgY*w*4 + 3] = imgData.data[imgX*4 + imgY*w*4 + 3];
}
}
postMessage({img: retData});
}
感谢您的宝贵时间。
你需要从你的过滤器循环内读取的坐标偏移,否则你将从相同的像素读取每次(imgX, imgY):
for(var filterX = 0; filterX < filter.length; filterX++) {
var filterImgX = (imgX + filterX) % w;
for(var filterY =0; filterY < filter.length; filterY++) {
var filterImgY = (imgY + filterY) % h;
r += imgData.data[filterImgX*4 + filterImgY * w * 4] * filter[filterY][filterX];
g += imgData.data[filterImgX*4 + filterImgY*w*4 + 1] * filter[filterY][filterX];
b += imgData.data[filterImgX*4 + filterImgY*w*4 + 2] * filter[filterY][filterX];
}
}
相关文章:
- 可以在这里为背景图像设置滤镜吗
- 使用 GSAP 对模糊滤镜进行动画处理
- 在没有滤镜的情况下模糊背景
- Kineticjs 将 Mask 滤镜应用于图层
- 将特殊效果应用于所选滤镜
- 角度滤镜不打印空格
- HTML5 画布对比度滤镜
- 如何在IE中将灰度和反转效果与SVG滤镜相结合
- 角度滤镜和 NgAnimate 冲突
- 根据滤镜的值有条件地添加 ng-animate 指令
- D3:将滤镜作为背景添加到SVG元素
- 如何为图像添加滤镜(模糊)
- 推特打字,寻血猎犬滤镜开始
- 从一个画布复制带有滤镜的图像并粘贴到另一个画布
- Array.滤镜打破狩猎印花
- Kinetijs:应用滤镜后阴影模糊不起作用
- HTML5画布不能应用sw滤镜
- 选择滤镜不适用于cellTemplate, angular ui-grid
- EaselJS -是否可以添加一个模糊滤镜到一条线
- Javascript像素操作画布,模糊滤镜不工作