<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="draw-in-me" width="120" height="40">
<p>Powered By HTML5</p>
</canvas>
<img src="1.jpg" id="avatar" title="小蘑菇" alt="my avatar"/>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function convertToGS(img){
//如果浏览器不支持<canvas>就返回
//if(!Modernizr.canvas) return;
//储存原来的颜色版
img.color = img.src;
//创建灰色版
img.grayscale = createGSCanvas(img);
//在onmouseover和onmouseout时发生切换
img.onmouseover = function(){
this.src = this.color;
}
img.onmouseout = function(){
this.src = this.grayscale;
}
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);
//注意:getImageData只能操作与脚本位于同一个域中的图片
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); //还有这个求像素点的式子为什么0,1,2 后面直接就是4,5,6 8,9,10？？？
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"))
}
</script>
</body>
</html>
2 个解决方案
#1
for(i=0;i<c.height;i++){
for(j=0;j<c.width;j++){
var x = (i*4)*c.width+(j*4); //还有这个求像素点的式子为什么0,1,2 后面直接就是4,5,6 8,9,10？？？
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;
}
}
改成这样。
getImageData返回值是从左上角 向右 到换行，一直到右下角的像素点数据，所以一个点是有4个值(r,g,b,a)，a是透明度
你那个循环如果是正方形就没问题了。
所以就要0,1,2，再4,5,6了。
#2
非常感谢~~~
#1
for(i=0;i<c.height;i++){
for(j=0;j<c.width;j++){
var x = (i*4)*c.width+(j*4); //还有这个求像素点的式子为什么0,1,2 后面直接就是4,5,6 8,9,10？？？
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;
}
}
改成这样。
getImageData返回值是从左上角 向右 到换行，一直到右下角的像素点数据，所以一个点是有4个值(r,g,b,a)，a是透明度
你那个循环如果是正方形就没问题了。
所以就要0,1,2，再4,5,6了。
#2
非常感谢~~~