Question

我正在尝试为灰度，负片和模糊效果制作一个简单的HTML5和JavaScript图像滤镜。每当我点击按钮时，画布上都没有出现。有什么办法可以解决吗？我尽我所能地尝试，但仍然失败了。请参阅下面的编码：

JavaScript的：

<script>

    function goClick(){
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        var btnGrayscale = document.getElementById('btnGrayscale');
        var btnNegative = document.getElementById('btnNegative');
        var btnBlur = document.getElementById('btnBlur');


        var img = new Image();
        img.onload = function(){
            ctx.drawImage(img, 0, 0);

        ctx.putImageData(imgd, 10, 353);
        }

    //grayscale
        btnGrayscale.onclick = function() {
            clear();
        ctx.drawImage(imageObj, 0, 0);

        var imgData = ctx.getImageData(0, 0, c.width, c.height);
        var pixels = imgData.data;

        for (var i = 0, n = pixels.length; i < n; i += 4) {
            var grayscale = pixels[i ] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
                pixels[i ] = grayscale; // red
                pixels[i+1] = grayscale; // green
                pixels[i+2] = grayscale; // blue
    // alpha
            }
        ctx.putImageData(imgData, 0, 0);
    };



        img.src = "image/Angelina_Jolie.jpg";

    }

HTML5：

<body>
    <img src="image/Angelina_Jolie.jpg" id="angelina"/>
    <canvas id='myCanvas' width='500' height='375' style='border:solid 1px #000000'></canvas>
    <input type="button" value="Grayscale" class="buttons" id="btnGrayscale" />
    <input type="button" value="Negative" class="buttons" id="btnNegative" /><br />
    <input type="button" value="Blur" class="buttons" id="btnBlur" /><br />
</body>

Answer 1

哇，那段代码中有很多错误。拼写错误的变量，不存在的对象等

我通过修复对canvas的所有引用（应该是c），删除blurPasses（不存在），将第一个putImageData更改为drawImage（它是图像，而不是像素数组），让它为你工作等等。

很明显，你自己并没有全部写完，而且你并没有真正付出任何努力来学习它的作用，以及为什么它不起作用。看看下面的小提琴代码，并将其与旧代码进行比较，看看有什么变化，不要只是复制并粘贴到你的项目中，并对它感到高兴。

var img = new Image();
img.onload = function () {
    ctx.drawImage(img, 0, 0); // Can't use putImageData here!
}

http://jsfiddle.net/p6ume/3/

HTML 5灰度过滤器无法正常工作

1 个答案: