0 0 7 8 - 用Canvas来玩弄像素

不二如是 · 发表于 2017-3-14 14:30:29

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 11:10 编辑

有没有被77的高B格标语震到？！

Canvas不仅能够绘制各种图形、文本、位图还可以直接对像素进行复杂的运算和处理。

简单说，就像图像处理一样，加个滤镜阿、模糊阿、各种LoMo阿。

老规矩还是先创建一个Canvas容器，想复习下的（请点这里）上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鱼C工作室</title>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 333px;
        }
    </style>
</head>
<body>
    <canvas id="fishcCanvas" width="1000" height="999">大兄弟，你的浏览器咋不支持Canvas呢？</canvas>
<script type="text/javascript">
    var canvas = document.getElementById("fishcCanvas");
    var context = canvas.getContext("2d");
</script>
</body>
</html>

接下来就从本地加载一张图片吧，就用Fishc官方图片

FishC.zip (550.16 KB, 下载次数: 40, 售价: 2 鱼币)

利用function（）来加载图片

var img = new Image();
    img.src = "FishC.png";
    img.onload = function () {
        context.drawImage(img,0,0);

    }

效果图：

因为在canvas声明中，设置宽高足够，所以图片可以正确显示。

如果初始设置canvas宽高不足，那么可以通过设置 context.drawImage(）来增大。

例如，context.drawImage(img.0,0,xxxx,xxxx);来保证加载图片正常显示。

在开始玩弄像素前，还需要从Canvas中获取位图的像素信息。

利用getImageData（）方法来获取包含每个像素点颜色的字节数据

    img.onload = function () {
        context.drawImage(img,0,0,530,530);

        img = context.getImageData(0,0,530,530);

    }

使用getImageData（）方法获取了位图的像素节数据后，就可以将这些值传给img对象。

这样就有了可以用来处理的数据流了。

获得这些数据后，就可以开始Hi了

遍历这些数据，得到每个像素的R、G、B、Alpha（透明度）。

这个就是位图的四通道RGBA。

例如有一个800 * 800的位图，就意味：

[b]☆共有800 * 800个像素点。

☆每个像素点都有4个值（R，G，B，A）。

☆整个位图字节数据的长度就是800 * 800 * 4 。[/b]

因为这幅图片是（528*528），凑个整统一设置为530*530。

所以循环的长度就是530 *530 *4

var pixcount = 530 * 530;
        for(var i = 0 ;i < pixcount * 4 ; i += 4)
        {
            var myRed = img.data[i]; //红色
            var myGreen = img.data[i +1 ] //绿色
            var myBlue = img.data[i + 2] //蓝色
            var myAlpha = img.data[i + 3]//透明度
        }

每个像素点的数据都是4位，所以遍历条件就是4位一跳，即（ i += 4）

现在已尽遍历所有的位图的所有像素点的所有值。

然后就可以拿着这些值，愉快的搞事情了～

例如生成灰色图，只要对每个像素点的RGB值都计算平均值，然后把这个值在赋予RGB就可以了。

最后，再把新数据，通过context.putImageData()重绘出来即可

for(var i = 0 ;i < pixcount * 4 ; i += 4)
        {
           ／*其他*／

            var myGray = parseInt((myRed + myGreen + myBlue) / 3);//均值获得灰度值
            img.data[i] = myGray;
            img.data[i+1]=myGray;
            img.data[i+2]=myGray;
        }

效果图：

例如半透明，就是第四位值都是128

for(var i = 0 ;i < pixcount * 4 ; i += 4)
        {
           /*其他*/

            img.data[i+3] = 128;
        }
        context.putImageData(img,0,0);

效果图：

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

auyhin丶 · 发表于 2017-8-19 00:36:05

交作业~我的天弄了好久.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas id="fishcCanvas" width="1000" height="999">你的浏览器不支持canvas.</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("fishcCanvas");
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = "FishC.png";
        img.onload = function() {
            context.drawImage(img, 0, 0, 530, 530);
            var imgd = context.getImageData(0, 0, 530, 530);

            var pix = imgd.data;
            for (var i = 0, n = pix.length; i < n; i += 4) {
//                var myRed = pix[i];
//                var myGreen = pix[i + 1];
//                var myBlue = pix[i + 2];
//                var myGray = parseInt((myRed + myGreen + myBlue) / 3);
//                pix[i] = myGray;
//                pix[i + 1] = myGray;
//                pix[i + 2] = myGray;
                pix[i + 3] = 128;
            }

            context.putImageData(imgd, 0, 0);

        }
    </script>
</body>
</html>

alltolove · 发表于 2017-3-14 15:34:24

这个不经常用吧？

不二如是 · 发表于 2017-3-14 15:35:23

alltolove 发表于 2017-3-14 15:34
这个不经常用吧？

有些简单网页美图，就有利用Canvas搞的

aswyamato1989 · 发表于 2017-8-24 00:15:01

交作业！

露水之余 · 发表于 2018-8-1 14:45:28

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at Image.img.onload
这个错误怎么解决啊

想成大神 · 发表于 2018-12-15 22:13:11

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0px;
        }
    </style>
</head>
<body>
    <canvas id="fishcCanvas" width="1000" height="999">你的浏览器不支持canvas</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("fishcCanvas");
        var context = canvas.getContext("2d");
        var img = new Image();
        img.src = "1.png";
        img.onload = function() {
            context.drawImage(img, 0, 0, 530, 530);
            img = context.getImageData(0, 0, 530, 530);

            var pixcount = 530*530;
            for (var i = 0, i < pixcount; i += 4) {
                var myRed = img.data[i];
                var myGreen = img.data[i + 1];
                var myBlue = img.data[i + 2];
                var myAlpha = img.data[i + 3];
                var myGray = parseInt((myRed + myGreen + myBlue) / 3);
                img.data[i] = myGray;
                img.data[i+1]= myGray;
                img.data[i+1]= myGray;
                img.data[i+3]=128;
                      
            }

            context.putImageData(img, 0, 0);

        }
    </script>
</body>
</html>

为啥我的啥都没有？

freeulove · 发表于 2019-7-8 10:34:40

好奇怪，跟着老师打就是出不来，楼上鱼油的帖子就可以，搞不懂=。=

小脑斧 · 发表于 2020-4-9 22:28:15

后半部分都不太理解，看评论改出来了

小脑斧 · 发表于 2020-4-9 23:36:58

拿ws试了，源代码又可以用了，看来是编译器的缘故

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 7 8 - 用Canvas来玩弄像素

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

评分