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'));
	
}


注意写完之后我直接将html文件打开了 ，结果浏览器报错

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

这个错误是由于上面代码中所说的 getImageData 操作了与当前脚本不在同一个域中的图片引起的  所以当我在localhost  下打开的时候就没事了

问题虽然解决了 但是我对域的理解不是很深入  有些疑惑为什么我的脚本和图片不在同一个域中呢？希望懂的人开到帮忙解答一下。


posted @ 2012-08-30 23:18  andy-liu-  阅读(583)  评论(0)    收藏  举报