可我不爱聪明

得益于html5的发展，canvas画布提供一种获取图片像素的方法：getImageData(x,y, width, height)。这样可以处理图片上的每一个像素点，使用网上提供的图像算法来进行图片特效处理。

原图

上面是原图

# 1.灰度效果

灰度效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var canvas = document.createElement('canvas');
    var cxt = canvas.getContext('2d');

    canvas.width = 400;//创建的canvas需要设置高和宽
    canvas.height = 400;

    var width = parseInt(canvas.getAttribute('width'));
    var height = parseInt(canvas.getAttribute('height'));

    var image = new Image();
    image.onload = imageLoaded;
    image.src = 'img/1.jpg';

    function imageLoaded() {
        //将图像滑到画布上
        cxt.drawImage(image, 0, 0);
        //取图像的像素数组
        imageData = cxt.getImageData(0, 0, width, height);
        for (var y = 0; y < imageData.height; y++) {
            for (var x = 0; x < imageData.width; x++) {
                var index = y * imageData.width + x;
                //一个像素占4字节，p为当前指针的位置
                var p = index * 4;
                var r = p + 0;
                var g = p + 1;
                var b = p + 2;
                r = g = b = (imageData.data[r] + imageData.data[g] + imageData.data[b]) / 3;
                //将改变后的颜色存进数组
                imageData.data[p + 0] = r;
                imageData.data[p + 1] = g;
                imageData.data[p + 2] = b;
            }
        }
        cxt.putImageData(imageData, 0, 0);
        var imageData = canvas.toDataURL('image/png');
        var img = document.createElement('img');
        img.src = imageData;
        img.width = '400';
        document.body.appendChild(img);
    }
</script>
</body>
</html>

# 2.底片效果

底片效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var canvas = document.createElement("canvas");
    var cxt = canvas.getContext("2d");

    canvas.width = 600;//创建的canvas需要设置高和宽
    canvas.height = 600;

    var width = parseInt(canvas.getAttribute("width"));
    var height = parseInt(canvas.getAttribute("height"));

    var image = new Image();
    image.onload = imageLoaded;
    image.src = "img/1.jpg";

    function imageLoaded() {
        //将图像滑到画布上
        cxt.drawImage(image, 0, 0);
        //取图像的像素数组
        imageData = cxt.getImageData(0, 0, width, height);
        //图片像素数组
        for (var y = 0; y < imageData.height; y++) {
            for (var x = 0; x < imageData.width; x++) {
                var index = y * imageData.width + x;
                //一个像素占4字节，p为当前指针的位置
                var p = index * 4;
                var r = p + 0;
                var g = p + 1;
                var b = p + 2;

                r = 255 - imageData.data[r];
                g = 255 - imageData.data[g];
                b = 255 - imageData.data[b];

                //将改变后的颜色存进数组
                imageData.data[p + 0] = r;
                imageData.data[p + 1] = g;
                imageData.data[p + 2] = b;
            }
        }
        cxt.putImageData(imageData, 0, 0);
        var imageData = canvas.toDataURL("image/png");
        var img = document.createElement("img");
        img.src = imageData;
        img.width = "600";
        document.body.appendChild(img);
    }
</script>
</body>
</html>

# 3.黑白效果

黑白效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var canvas = document.createElement("canvas");
    var cxt = canvas.getContext("2d");

    canvas.width = 400;//创建的canvas需要设置高和宽
    canvas.height = 400;

    var width = parseInt(canvas.getAttribute("width"));
    var height = parseInt(canvas.getAttribute("height"));

    var image = new Image();
    image.onload = imageLoaded;
    image.src = "img/1.jpg";

    function imageLoaded() {
        //将图像滑到画布上
        cxt.drawImage(image, 0, 0);
        //取图像的像素数组
        imageData = cxt.getImageData(0, 0, width, height);
        for (var y = 0; y < imageData.height; y++) {
            for (var x = 0; x < imageData.width; x++) {
                var index = y * imageData.width + x;
                //一个像素占4字节，p为当前指针的位置
                var p = index * 4;
                var r = p + 0;
                var g = p + 1;
                var b = p + 2;
                var avg = (imageData.data[r] + imageData.data[g] + imageData.data[b]) / 3;
                if (avg > 100) {
                    r = g = b = 255;
                } else {
                    r = g = b = 0;
                }
                //将改变后的颜色存进数组
                imageData.data[p + 0] = r;
                imageData.data[p + 1] = g;
                imageData.data[p + 2] = b;
            }
        }
        cxt.putImageData(imageData, 0, 0);
        var imageData = canvas.toDataURL("image/png");
        var img = document.createElement("img");
        img.src = imageData;
        img.width = "400";
        document.body.appendChild(img);
    }
</script>
</body>
</html>

← npm发包 →