利用Canvas编辑图片

本文介绍了一种使用HTML5的<canvas>元素将彩色图片转换为灰度图片的方法。通过JavaScript操作图像像素,实现了图片颜色到灰度的转换,并在鼠标悬停时展示彩色与灰度效果的切换。

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

使用<canvas>对象在浏览器中把一幅彩色图片变成灰度图片。

grayscale.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Grayscale Canvas Example</title>
 6     <script src="js/grayscale.js"></script>
 7 </head>
 8 <body>
 9     <img src="images/bigben.jpg" id="bigben" title="BigBen" alt="My Bigben" />
10 </body>
11 </html>

grayscale.js文件:

 1 /**
 2  * Created by Administrator on 2017/1/6.
 3  */
 4 function convertToGS(img) {
 5     //if(!Modernizr.canvas) return;
 6     if(!document.createElement("canvas")) return false;
 7     //存储原始的彩色版
 8     img.color = img.src;
 9 
10     //创建灰度版
11     img.grayscale = createGSCanvas(img);
12 
13     //在mouseover/out事件发生时切换图片
14     img.onmouseover = function () {
15         this.src = img.color;
16     }
17     img.onmouseout = function () {
18         this.src = img.grayscale;
19     }
20     img.onmouseout();
21 
22 }
23 
24 function createGSCanvas(img) {
25     var canvas = document.createElement("canvas");
26     canvas.width = img.width;
27     canvas.height = img.height;
28     var ctx = canvas.getContext("2d");
29     ctx.drawImage(img,0,0);
30 
31     //getImageData只能操作与脚本位于同一个域中的图片
32     var c = ctx.getImageData(0,0,img.width,img.height);
33     for(var i=0;i<c.height;i++){
34         for(var j=0;j<c.width;j++){
35             var x = (i*4)*c.height+(j*4);
36             var r = c.data[x];
37             var g = c.data[x+1];
38             var b = c.data[x+2];
39             c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
40         }
41     }
42 
43     ctx.putImageData(c,0,0,0,0,c.width,c.height);
44     return canvas.toDataURL();
45 }
46 
47 window.onload = function () {
48     convertToGS(document.getElementById('bigben'));
49 }

 

转载于:https://www.cnblogs.com/shuqicui/p/2017-1-6.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值