canvas 将彩色图片变成灰度图片
最近在看javascript DOM 编程艺术这本书
在书上看到这个例子，觉得摘抄下来
首先html 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Grayscale Canvas Example</title> <script src="./modernizr.js"></script> </head> <body> <img src="./a.jpg" id="avatar" title="Jeffry Sambells" alt="My Avatar"> <script src="grayscale.js"></script> </body> </html>
注：modernizr.js 是从www.modernizr.com上下载的 他是一个开源的javascript库 ，它提供了丰富的特性检测功能，有了它可以对html5 文档进行很好的控制。
下面是grayscale.js代码
function converToGS(img) {
// 如果浏览器不支持canvas就返回
if(!Modernizr.canvas) return;
// 存储原始颜色的彩色版
img.color = img.src;
// 创建灰度版
img.grayscale = createGSCanvas(img);
// 在mouseover/out事件发生时切换图片
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.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();
}
// 添加load时间。 如果有其他脚本，可以使用addLoadEvent函数
window.onload = function() {
converToGS(document.getElementById('avatar'));
}
这个错误是由于上面代码中所说的 getImageData 操作了与当前脚本不在同一个域中的图片引起的 所以当我在localhost 下打开的时候就没事了
问题虽然解决了 但是我对域的理解不是很深入 有些疑惑为什么我的脚本和图片不在同一个域中呢？希望懂的人开到帮忙解答一下。
