JavaScript锐化图像和边缘检测不工作
我用HTML5和JavaScript制作了一个简单的图像处理/过滤器web应用程序。每一个滤波器都工作良好，如亮度、灰度、负片等。除了锐化图像、边缘检测之外，所有的邻域操作都不工作 我尝试了所有可能的方法，尝试谷歌，寻找参考资料，但失败了。我找到的参考文献显示了矩阵系统，我知道矩阵系统的概念，但不知道如何应用。如果我能解决我的问题，那就太好了。请看下面我的代码，目前，我正在发布我的夏普A图像代码 我发现像这样的东西可以使图像锐化 ( [ 0, -1, 0, -1, 5, -1, 0，-1，0]），但我不知道如何应用。所以我试着像下面的代码一样应用它JavaScript锐化图像和边缘检测不工作,javascript,html,canvas,filter,pixels,Javascript,Html,Canvas,Filter,Pixels,我用HTML5和JavaScript制作了一个简单的图像处理/过滤器web应用程序。每一个滤波器都工作良好，如亮度、灰度、负片等。除了锐化图像、边缘检测之外，所有的邻域操作都不工作 我尝试了所有可能的方法，尝试谷歌，寻找参考资料，但失败了。我找到的参考文献显示了矩阵系统，我知道矩阵系统的概念，但不知道如何应用。如果我能解决我的问题，那就太好了。请看下面我的代码，目前，我正在发布我的夏普A图像代码 我发现像这样的东西可以使图像锐化 ( [ 0, -1, 0, -1, 5, -1, 0，-1，
<script>
function pic() {
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var btnsharpen = document.getElementById('btnsharpen');
var img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
//sharp the image
btnsharpen.onclick = function(){
ctx.drawImage(img, 0, 0);
var imgData = ctx.getImageData(0,0, c.width, c.height);
var pixels = imgData.data;
var numPixels = ((imgData.width-1) *(imgData*4)+ ((imgData.height)*4));
for (var i = 0, n = numPixels; i < n; i +=4) {
var sharpen = (pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
(pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
(pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
(pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
(pixels[i] * 5 + pixels[i + 1] * 5 + pixels[i + 2] * 5) +
(pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
(pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0) +
(pixels[i] * -1 + pixels[i + 1] * -1 + pixels[i + 2] * -1) +
(pixels[i] * 0 + pixels[i + 1] * 0 + pixels[i + 2] * 0);
pixels[i] = sharpen; // red
pixels[i + 1] = sharpen; // green
pixels[i + 2] = sharpen; // blue
}
ctx.putImageData(imgData, 0, 0);
img.src = "image/Angelina_Jolie.jpg";
}
</script>
<body onLoad="pic()">
<canvas id='myCanvas' width='500' height='375' style='border:solid 1px #000000'></canvas>
<input type="button" value="Sharpen" class="buttons" id="btnsharpen" /><br />
</body>
函数pic（）{
var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（'2d'）；
var btnsharpen=document.getElementById（'btnsharpen'）；
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}
//锐化图像
btnsharpen.onclick=函数（）{
ctx.drawImage（img，0,0）；
var imgData=ctx.getImageData（0,0，c.宽度，c.高度）；
var像素=imgData.data；
变量numPixels=（（imgData.width-1）*（imgData*4）+（imgData.height）*4））；
对于（变量i=0，n=numPixels；ivar canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
屏幕外=document.createElement（'canvas'），
offctx=offScreen.getContext（'2d'），
img=新图像（）；
///因为我们需要像素访问来应用卷积，所以
///需要绕过CORS：
img.crossOrigin='匿名'；
///加载图像时，请逐步缩小尺寸
img.onload=调整大小；
img.src=”http://i.imgur.com/DR94LKg.jpg";
///锐化图像：
///用法：
///锐化（上下文、宽度、高度、混合因子）
///混合因子：[0.0,1.0]
功能锐化（ctx、w、h、mix）{
变量权重=[0，-1,0，-1,5，-1,0，-1,0]，
katet=Math.round（Math.sqrt（weights.length）），
一半=（凯特*0.5）| 0，
dstData=ctx.createImageData（w，h），
dstBuff=dstData.data，
srcBuff=ctx.getImageData（0,0,w,h）.data，
y=h；
而（y--）{
x=w；
而（x-）{
var sy=y，
sx=x，
dstOff=（y*w+x）*4，
r=0，
g=0，
b=0，
a=0；
对于（变量cy=0；cy=0&&scy=0&&scx var canvas=document.getEleme
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
offScreen = document.createElement('canvas'),
offctx = offScreen.getContext('2d'),
img = new Image();
/// as we need pixel access to apply convolution we
/// need to get around CORS:
img.crossOrigin = 'anonymous';
/// when image is loaded step-down the downscaling
img.onload = resize;
img.src = "http://i.imgur.com/DR94LKg.jpg";
/// sharpen image:
/// USAGE:
/// sharpen(context, width, height, mixFactor)
/// mixFactor: [0.0, 1.0]
function sharpen(ctx, w, h, mix) {
var weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
katet = Math.round(Math.sqrt(weights.length)),
half = (katet * 0.5) | 0,
dstData = ctx.createImageData(w, h),
dstBuff = dstData.data,
srcBuff = ctx.getImageData(0, 0, w, h).data,
y = h;
while (y--) {
x = w;
while (x--) {
var sy = y,
sx = x,
dstOff = (y * w + x) * 4,
r = 0,
g = 0,
b = 0,
a = 0;
for (var cy = 0; cy < katet; cy++) {
for (var cx = 0; cx < katet; cx++) {
var scy = sy + cy - half;
var scx = sx + cx - half;
if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
var srcOff = (scy * w + scx) * 4;
var wt = weights[cy * katet + cx];
r += srcBuff[srcOff] * wt;
g += srcBuff[srcOff + 1] * wt;
b += srcBuff[srcOff + 2] * wt;
a += srcBuff[srcOff + 3] * wt;
}
}
}
dstBuff[dstOff] = r * mix + srcBuff[dstOff] * (1 - mix);
dstBuff[dstOff + 1] = g * mix + srcBuff[dstOff + 1] * (1 - mix);
dstBuff[dstOff + 2] = b * mix + srcBuff[dstOff + 2] * (1 - mix)
dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
}
}
ctx.putImageData(dstData, 0, 0);
}
/// naive and non-efficient implementation of update, but
/// do illustrate the impact of sharpen after a downsample
function resize() {
/// set canvas size proportional to original image
canvas.height = canvas.width * (img.height / img.width);
/// set off-screen canvas/sharpening source to same size
offScreen.width = canvas.width;
offScreen.height = canvas.height;
/// step 1 in down-scaling
var oc = document.createElement('canvas'),
octx = oc.getContext('2d');
oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);
/// step 2
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
/// draw final result to screen canvas
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
0, 0, canvas.width, canvas.height);
/// copy to off-screen to use as source for shapening
offctx.drawImage(canvas, 0, 0);
/// apply sharpening convolution
update();
}
/// adjustable sharpening - update cached source
function update() {
ctx.drawImage(offScreen, 0, 0);
sharpen(ctx, canvas.width, canvas.height, parseInt(mix.value) * 0.01);
}