canvas 将彩色图片变成灰度图片

最新推荐文章于 2024-03-13 15:23:55 发布

weixin_30516243

最新推荐文章于 2024-03-13 15:23:55 发布

阅读量138

点赞数

原文链接：http://www.cnblogs.com/andyliu007/archive/2012/08/30/2795407.html

版权

最近在看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 下打开的时候就没事了

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

转载于:https://www.cnblogs.com/andyliu007/archive/2012/08/30/2795407.html

weixin_30516243

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫