您的位置：首页 > 其它

基于canvas图像处理的图片展示demo

2012-07-26 16:00 357 查看

图片展示网页往往色彩繁杂，当一个网页上有多张图片的时候用户的注意力就很不容易集中，而且会造成网站整个色调风格的不可把控。

能不能把所有的预览图变成灰度图片，等用户激活某张图片的时候再上色呢？

以前，唯一的方法就是让美工做两张图，一张彩色一张黑白，费时费力。

能不能让js对图片进行一些处理呢？幸运的是，canvas就提供了图片处理的方法。

canvas+js可以让我们对图片进行像素级的操作，我们可以通过操作图像的像素实现各种图片处理效果,如模糊，马赛克，液化，调色等等。

详细代码及注释如下：

<!doctype html>
<html>
<head>
<title>Canvas图像处理demo-by-@谢帅shawn</title>
<meta charset='utf-8' />
<script src="jQuery.js" type="text/javascript"></script>
<style>
h1{text-align:center;}
.outer{width:800px;margin:0 auto;}
img{border:0;width:200px;height:350px;margin:0;padding:0;}
</style>
</head>

<body>
<h1>Canvas图像处理demo</h1>
<div class='outer'>
<img class='image' src='images/1.jpg'/>
<img class='image' src='images/2.jpg'/>
<img class='image' src='images/3.jpg'/>
<img class='image' src='images/4.jpg'/>
<img class='image' src='images/5.jpg'/>
</div>
<script>
　　　　　/*等图片加载完成后再执行（若图片没有加载完成，则不能正常进行图片处理）*/
$(window).load(function(){
　　　　　　　/*克隆一张原图，把当前图片变为灰度图*/
$('.image').each(function(){
$(this).css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block;position:relative;float:left;'></div>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore($(this));
$('.img_wrapper').css({'height':$(this).height(),'width':$(this).width()});
this.src=huidu(this.src);
});
　　　　　　　/*通过控制彩色图片的透明度模拟上色效果*/
$('.img_wrapper').mouseover(function(){
$(this).find('img:first').stop().animate({opacity:1},100);
})
$('.img_wrapper').mouseout(function(){
$(this).find('img:first').stop().animate({opacity:0},100);
});
/*
　　　　　　　　*function
　　　　　　　　*函数名称：huidu
　　　　　　　　*功能：把图片转换为灰度图
　　　　　　　　*参数：src（原图的url）
　　　　　　　　*返回值：（转换完成后的图片url）
　　　　　　　　*/
function huidu(src){
　　　　　　　　　/*创建一个canvas*/
var canvas=document.createElement('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src=src;
canvas.height=img.height;
canvas.width=img.width;
ctx.drawImage(img,0,0);
var imgdata=ctx.getImageData(0,0,canvas.width,canvas.height);var data=imgdata.data;
　　　　　　　　　/*灰度处理：求r，g，b的均值，并赋回给r，g，b*/
for(var i=0,n=data.length;i<n;i+=4){
var average=(data[i]+data[i+1]+data[i+2])/3;
data[i]=average;
data[i+1]=average;
data[i+2]=average;
}
ctx.putImageData(imgdata,0,0);
　　　　　　　　　/*返回处理之后的src*/
return canvas.toDataURL();
}
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航