HTML 5灰度过滤器不工作

HTML 5 Grayscale filter not working

本文关键字：工作 过滤器 灰度 HTML      更新时间：2023-09-26

我正在尝试为灰度、负片和模糊效果制作一个简单的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>

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

我修复了对画布的所有引用（应该是c），删除了blurPass（不存在），将第一个putImageData更改为drawImage（这是一个图像，而不是当时的像素阵列）等等。

很明显，你并不是自己写的，你也没有真正努力学习它的作用，以及为什么它不起作用。看看下面的fiddle中可用的代码，并将其与旧代码进行比较，看看有什么变化，而不仅仅是复制&把它粘贴到你的项目中，并为此感到高兴。

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

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

相关文章：