问题描述
我不善于JavaScript,一直试图获得代码工作没有成功。当我加载页面,它变得无响应,所以我将不得不关闭窗口。我使用的代码如下。出错了什么?
I am not good at JavaScript and have been trying to get Ivan Kuckir's Fastest Gaussian Blur code to work with no success. When I load the page, it becomes unresponsive so that I will have to close the window somehow. The code I use follows. What am doing wrong?
<html>
<head>
<script src="Path_To_GaussianBlur.js"></script>
</head>
<body>
<img id="sourceImage" src="SomeImage_200px_x_200px.jpg" />
<canvas id="canvas1" width="200" height="200" style="border: 1px solid blue"></canvas>
<canvas id="canvas2" width="200" height="200" style="border: 1px solid red"></canvas>
<script>
document.getElementById("sourceImage").onload = function () {
var c1 = document.getElementById("canvas1");
var c2 = document.getElementById("canvas2");
var ctx1 = c1.getContext("2d");
var ctx2 = c2.getContext("2d");
var img = document.getElementById("sourceImage");
ctx1.drawImage(img, 0, 0);
ctx2.drawImage(img, 0, 0);
var source = ctx1.getImageData(0, 0, c1.width, c1.height);
var target = ctx2.getImageData(0, 0, c2.width, c2.height);
for (var i = 0; i < source.data.length; i += 4) {
// red chanel
gaussBlur_4(source.data[i], target.data[i], c1.width, c1.height, 2);
// green channel
gaussBlur_4(source.data[i + 1], target.data[i + 1], c1.width, c1.height, 2);
// blue channel
gaussBlur_4(source.data[i + 2], target.data[i + 2], c1.width, c1.height, 2);
}
ctx2.putImageData(target, 0, 0);
};
</script>
</body>
</html>
推荐答案
如注释中所述,您需要拆分rgba数组进入独立的渠道。您可以通过以下几种方式完成此操作:
As stated in comments you need to split the rgba array into separate channels. You can do this in several ways, here is one:
var idata = ctx.getImageData(0, 0, w, h), // assumes ctx/w/h to be defined
rgba = idata.data,
len = w * h,
rSrc = new Uint8Array(len), // source arrays
gSrc = new Uint8Array(len),
bSrc = new Uint8Array(len),
aSrc = new Uint8Array(len),
// define target arrays the same way as above
i = 0, offset = 0;
for(; i < len; i++) {
rSrc[i] = rgba[offset++];
gSrc[i] = rgba[offset++];
bSrc[i] = rgba[offset++];
aSrc[i] = rgba[offset++];
}
现在你可以将每个数组传递给blur函数使用目标数组
Now you can pass each of those arrays to the blur function using target arrays set up in a similar manner as the source arrays, then merge back the result to rgba format.
gaussBlur_4(rSrc, rTrg, w, h, radius);
gaussBlur_4(gSrc, gTrg, w, h, radius);
gaussBlur_4(bSrc, bTrg, w, h, radius);
gaussBlur_4(aSrc, aTrg, w, h, radius);
其他提示:如果您使用图片(如照片),您可以跳过模糊Alpha通道
Additional tip: if you're using images (as in photos) you can skip blurring the alpha channel as there is none (or technically, is fully opaque in canvas).
要合并,只需简单地do:
To merge, simply do:
for(i = 0, offset = 0; i < len; i++) {
rgba[offset++] = rTrg[i];
rgba[offset++] = gTrg[i];
rgba[offset++] = bTrg[i];
rgba[offset++] = aTrg[i]; // or just increase offset if you skipped alpha
}
ctx.putImageData(idata, 0, 0);
由于许可证冲突SO,一个运行的例子可以在这 (and 是使用32位方法的替代拆分/合并)。
Due to license conflict on SO a running example can be found in this fiddle (and here is an alternative split/merge using 32-bits approach).
这篇关于最快的高斯模糊不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!