canvas之马赛克
用canvas的像素操作做了一个简单的马赛克效果。主要是利用的canvas中的一些有关像素的函数，思路很简单，就是将马赛克盒子中的所有像素都设置成相同的，设置的数据可以从马赛克盒子范围内随机选取一个单像素的数据。因为canvas中没有直接操作单像素的函数，所以要自己定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#mosaic{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: gray;
}
</style>
</head>
<body>
<canvas id="mosaic">
<span>画布无法正常显示</span>
</canvas>
</body>
<script type="text/javascript">
window.onload = function(){
var mosaic = document.querySelector("#mosaic")
if(mosaic.getContext){
var msk = mosaic.getContext("2d")
var img = new Image()
img.src = "msk.jpg"
img.onload = function(){
mosaic.width = 2*img.width
mosaic.height = img.height
draw(this)
}
function draw(img){
msk.drawImage(img,0,0,img.width,img.height)
var oldImgdata = msk.getImageData(0,0,img.width,img.height)
var newImgdata = msk.createImageData(img.width,img.height)
//mosaic
/*
*1、选区一个马赛克矩形
*2、从马赛克矩形中随机抽出一个像素点的信息(rgba)
*3、将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
*/
var size = 4
for(var i=0;i<oldImgdata.width/size;i++){
for (var j=0;j<oldImgdata.height/size;j++) {
//(i,j) => 每一个马赛克矩形的坐标
//(0,0) => (0,0)-(4,4)
//(0,1) => (0,5)-(4,9)
//(1,0) => (5,0)-(9,4)
//(1,1) => (5,5)-(9,9)
//Math.random()返回的是[0,1)之间的随机数
//Math.floor()向下取整
var color = getPxInfo(oldImgdata,size*i+Math.floor(Math.random()*size),size*j+Math.floor(Math.random()*size))
for (var k=0;k<size;k++) {
for (var l = 0; l < size; l++) {
setPxInfo(newImgdata,size*i+k,size*j+l,color)
}
}
}
}
msk.putImageData(newImgdata,img.width,0)
}
function getPxInfo(imgdata,x,y){
var color = []
var data = imgdata.data
var w = imgdata.width
var h = imgdata.height
color[0] = data[(y*w+x)*4]
color[1] = data[(y*w+x)*4 + 1]
color[2] = data[(y*w+x)*4 + 2]
color[3] = data[(y*w+x)*4 + 3]
return color
}
function setPxInfo(imgdata,x,y,color){
var data = imgdata.data
var w = imgdata.width
var h = imgdata.height
data[(y*w+x)*4] = color[0]
data[(y*w+x)*4 + 1] = color[1]
data[(y*w+x)*4 + 2] = color[2]
data[(y*w+x)*4 + 3] = color[3]
}
}
}
</script>
</html>
效果图如下，左边是原图，右边是马赛克之后的图片：