您的位置：首页 > 其它

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

2012-08-30 23:18 441 查看

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

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

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

标签：

相关文章推荐

新的分享

章节导航