JavaScript锐化图像和边缘检测不起作用答案

【问题标题】：JavaScript Sharpen Image and Edge Detection not workingJavaScript锐化图像和边缘检测不起作用
【发布时间】：2013-12-17 11:24:36
【问题描述】：

我使用 HTML5 和 JavaScript 制作了一个简单的图像处理/过滤器 Web 应用程序。每个过滤器都可以正常工作，如亮度、灰度、负片等。除了锐化图像，边缘检测各种邻域操作都不起作用。

我已经尝试了所有可能的方法，尝试了谷歌，寻找参考但失败了。我找到的参考资料显示了矩阵系统，我知道矩阵系统的概念，但不知道如何应用。如果我能解决我的问题，那就太好了。请在下面查看我的代码，目前，我正在发布我的 Sharp 图像代码。

我找到了这样的东西来锐化图像 ( [ 0, -1, 0, -1, 5, -1, 0, -1, 0 ])，但我不知道如何申请。所以我尝试像下面的代码一样应用它

<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>

【问题讨论】：

您搜索的是 JavaScript 库还是 C 库？
no @GameAlchemist 我没有搜索过......我真的很头疼这个问题
看看这里html5rocks.com/en/tutorials/canvas/imagefilters
我尝试了几次，但没有成功，我知道 3x3 卷积矩阵的概念，但我不知道如何在代码中应用它...... :(

标签： javascript html canvas filter pixels

【解决方案1】：

老问题（希望你找到了答案，@bleach64），但对于任何感兴趣的人，这里有一个我发现的图像锐化小提琴：

Step-down downsample + sharpen convolution

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);
}

【讨论】：