Canvas: 把彩色图片变为灰度图片

最新推荐文章于 2023-11-12 21:26:35 发布

Zayn17

最新推荐文章于 2023-11-12 21:26:35 发布

阅读量956

点赞数

分类专栏：前端文章标签： Canvas

本文链接：https://blog.csdn.net/weixin_43867927/article/details/102696463

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

此处出自《JavaScript DOM编程艺术（第二版）》
要点：

使用Modernizr对浏览器是否支持< canvas > 进行检测
通过getImageData获取用户像素数据
对用户的像素数据进行处理

提示：（W3school）
对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：

R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)

grayscale.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--记得添加modernizr插件-->
    <script src="scripts/modernizr.custom.77598.js"></script>
</head>
<body>
<img src="images/1.jpg" id="avatar" title="Jeffrey" alt="My Avatar" />
<script src="scripts/grayscale.js"></script>
</body>
</html>

grayscale.js

function convertToGS(img) {
    // 如果浏览器不支持<canvas>就返回
    if(!Modernizr.canvas) return;
    // 存储原始的彩色版
    img.color = img.src;
    // 创建灰度版
    img.grayscale = createGSCanvas(img);

    // 鼠标进入图片变为彩色
    img.onmouseover = function () {
        this.src = this.color;
    };
    // 鼠标离开图片变为灰色
    img.onmouseout = function () {
        this.src = this.grayscale;
    };
    img.onmouseout();
}

function createGSCanvas(img) {
    // 创建一个新的canvas元素，在其绘图环境中绘制了彩色图片
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    // 取得原始的图像数据
    var c = ctx.getImageData(0, 0, img.width, img.height);
    // 循环遍历其中每一个元素，
    // 将每个彩色像素的红、绿、蓝彩色成分求平均值，得到彩色值的灰度值
    for(i = 0; i<c.height; i++){
        for(j = 0; j<c.width; j++){
            var x = (i*4) * c.width + (j*4);
            var r = c.data[x];
            var g = c.data[x+1];
            var b = c.data[x+2];
            c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b) / 3;
        }
    }
    // 把灰度数据再放回到画布的绘图环境
    ctx.putImageData(c, 0, 0, 0, 0, c.width, c.height);
    // 返回原始的图像数据作为新灰度图片的源
    return canvas.toDataURL();
}


// 加载转变函数
window.onload = function () {
    convertToGS(document.getElementById('avatar'));
};

最终效果

鼠标未进入

鼠标进入
在这里插入图片描述

Zayn17

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas: 把彩色图片变为灰度图片

此处出自《JavaScript DOM编程艺术（第二版）》要点：使用Modernizr对浏览器是否支持< canvas > 进行检测通过getImageData获取用户像素数据对用户的像素数据进行处理提示：（W3school）对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：R - 红色 (0-255)G - 绿色 (0-255)...
复制链接

扫一扫