在实现马赛克效果中使用getImageData()遇到的问题
2017-08-02 本文已影响0人
梨_lalala
自己写的马赛克代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片马赛克</title>
<style type="text/css">
#canvas
{
display: block;
border:1px solid #000;
margin:50px auto;
}
</style>
</head>
<body>
<canvas id="canvas">此浏览器不支持canvas</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById('canvas');
canvas.width=900;
canvas.height=600;
var context=canvas.getContext('2d');
var img=new Image();
img.src="1.jpg";
img.onload=function(){ //等图片加载完成后执行drawImage，否则图片不能显示
context.drawImage(img,0,0,450,600);
for(var i=0;i<450;i=i+10)
{
for(var j=0;j<600;j=j+10)
{
var oImg=context.getImageData(i,j,10,10);
var count=Math.floor(Math.random()*10*10);
var nImg=context.createImageData(10,10);
setData(nImg,count,oImg);
context.putImageData(nImg,450+i,j);
}
}
}
}
function setData(nImage,index,oImage)
{
for(var i=0;i<nImage.data.length;i=i+4)
{
nImage.data[i]=oImage.data[4*index];
nImage.data[i+1]=oImage.data[4*index+1];
nImage.data[i+2]=oImage.data[4*index+2];
nImage.data[i+3]=oImage.data[4*index+3];
}
}
</script>
</body>
</html>
此时chrome报错，如下图所示
image.png
经过搜索发现，getImageData()只能操作与脚本处于同一域的图片，由于操作的是本地文件夹里的图片，没有域名，所以此操作 进行了跨域，但在chrome中将不会报错，马赛克效果能够正常显示。
