Question

function md1() {
    var canvas = document.getElementById('c1');
    var ctx = canvas.getContext('2d');

    function blur() {
        var cd5 = ctx.getImageData(0, 0, canvas.height, canvas.width);
        var pxls = cd5.data;
        var r = 0;
        var g = 0;
        var b = 0;
        var x = 0,
            y = 0,
            height, width;

        function pixelcalculator(pxls, x, y, cd5.width) {
            var canvasformula = ((y * pxls.width) + x) * 4;
            var pixel = {
                r = pxls[canvasformula],
                g = pxls[canvasformula + 1],
                b = pxls[canvasformula + 2]
            }
            return pixel;
        }


        for (y = 0; y < pxls.height; y += 4) {
            for (x = 4; x < pxls.width; x += 4) {

                var ori = pixelcalculator(x, y);
                var modi1 = pixelcalculator(x - 1, y - 1);
                var modi2 = pixelcalculator(x, y - 1);
                var modi3 = pixelcalculator(x + 1, y - 1);
                var modi4 = pixelcalculator(x - 1, y);
                var modi5 = pixelcalculator(x + 1, y);
                var modi6 = pixelcalculator(x - 1, y + 1);
                var modi7 = pixelcalculator(x - 1, y);
                var modi8 = pixelcalculator(x + 1, y + 1);

                var red = (ori[0] * 1 / 9) + (modi1[0] * 1 / 9) + (modi2[0] * 1 / 9) + (modi3[0] * 1 / 9) + (modi4[0] * 1 / 9) + (modi5[0] * 1 / 9) + (modi6[0] * 1 / 9) + (modi7[0] * 1 / 9) + (modi8[0] * 1 / 9);
                var green = (ori[1] * 1 / 9) + (modi1[1] * 1 / 9) + (modi2[1] * 1 / 9) + (modi3[1] * 1 / 9) + (modi4[1] * 1 / 9) + (modi5[1] * 1 / 9) + (modi6[1] * 1 / 9) + (modi7[1] * 1 / 9) + (modi8[1] * 1 / 9);
                var blue = (ori[2] * 1 / 9) + (modi1[2] * 1 / 9) + (modi2[2] * 1 / 9) + (modi3[2] * 1 / 9) + (modi4[2] * 1 / 9) + (modi5[2] * 1 / 9) + (modi6[2] * 1 / 9) + (modi7[2] * 1 / 9) + (modi8[2] * 1 / 9);
            }
        }

    }



    ctx.putImageData(cd5, 0, 0);
}

我是html5的新手。我试图应用此公式使图像模糊，但Web浏览器在pixelcalculator函数上显示错误意外标记。谢谢你的帮助，我是一个认真的编程新手

Answer 1

你应该多阅读一些关于功能的内容（试试http://eloquentjavascript.net/chapter3.html ）

声明函数的参数时，只声明其名称。你当时不能传递值。

值，您将在调用该函数时传递它们。

由于cd5.width

，.作为参数名称无效

同样在调用var ori = pixelcalculator(x,y) ;时，你需要按照你声明它们的顺序传递变量（，你还需要传递你将在函数中使用的所有变量）

您的代码还有其他问题，例如

在内部范围内声明变量并尝试在该范围之外访问它们等。
尝试访问对象的属性，就像它是一个数组一样（ pixelcalculator返回一个包含3个属性r，g，b的对象但是你尝试使用ori[0]，ori[1] ..代替ori.r，ori.g` .. ）
在声明对象时，键由:而不是=（，就像在pixelcalculator函数中）的值分隔

一般来说，你必须阅读更多关于javascript语法的内容。
请参阅http://eloquentjavascript.net/contents.html和https://developer.mozilla.org/en-US/docs/Web/JavaScript

初学者寻求矩阵卷积的帮助

1 个答案: