自己寫的馬賽克代碼如下：
<!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中將不會報錯，馬賽克效果能夠正常顯示。
