利用canvas对图片进行灰度色处理，图片只有一半变成灰度色

最新推荐文章于 2025-06-10 09:20:25 发布

PHP__廊外诗鸽

最新推荐文章于 2025-06-10 09:20:25 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： canvas javascript 灰度色

本文链接：https://blog.youkuaiyun.com/tashanhongye/article/details/73064881

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用canvas在JavaScript中实现图片处理，特别是让图片仅一半呈现灰度色的效果。通过修改grayscale.js中的代码，将'height'改为'width'，实现了全幅图像的灰度转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在对图片进行灰度色处理时，图片只有一半出现灰度色。代码如下：

grayscale.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grayscale example</title>
    <script src="scripts/modernizr.js" type="text/javascript"></script>
</head>
<body>
    <img src="image/2.jpg" id="avatar" title="jeffrey Sambells" alt="My Avatar" />
    <script src="scripts/grayscale.js"></script>
</body>
</html>

注：* head中的modernizr.js ，必须放在head中，不能放在body的后面，至于modernizr的下载方法如下连接：*

http://modernizr.cn/download/

这里写图片描述

grayscale.js


function convertToGS(img){
    if(!Modernizr.canvas) return;

    //存储原始的色彩版
    img.color=img.src;

    //创建灰度版
    img.grayscale=createGSCanvas(img);

    //在mouseover/out事件发生时切换图片
    img.onmouseover=function(){
       // this.src=this.color;
        this.src=this.grayscale;
    }

    img.onmouseout=function(){
       // this.src=this.grayscale;
        this.src=this.color;
    }

    img.onmouseout();
}


function createGSCanvas(img){
    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.height+(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'));
}