用canvas自定义马赛克
用canvas自定义马赛克
使用自定义方法制作马赛克
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>马赛克</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
width: 100%;
overflow: hidden;
}
#test {
background-color: pink;
}
</style>
</head>
<body>
<canvas id="test"></canvas>
</body>
<script>
var test = document.getElementById("test")
test.height = document.documentElement.clientHeight
test.width = document.documentElement.clientWidth
var ctx = test.getContext('2d')
var img = new Image()
img.src = "test.jpg"
getMosaic(ctx,img,0,0)
/*
* ctx 画布对象
* img 图片对象
* 马赛克位置x，y
* size 马赛克大小
* */
function getMosaic(ctx,img,x,y,size=4) {
img.onload = function() {
ctx.drawImage(img,0,0)
var oldImg = ctx.getImageData(0,0,img.width,img.height)
//设置1个马赛克大小
var newImg = ctx.createImageData(oldImg.width,oldImg.height)
for (var mh=0;mh<img.height/size;mh++) {
for (var mw=0;mw<img.width/size;mw++) {
// 获取像素
var color = getPxInfo(oldImg,mw*size + Math.floor(Math.random()*size),mh*size+Math.floor(Math.random()*size))
// 给新图片设置像素
for (var a=0;a<size;a++) {
for (var b=0;b<size;b++) {
setPxInfo(newImg,mw*size+a,mh*size+b,color)
}
}
}
}
ctx.putImageData(newImg,x,y)
}
}
/*
* 获取当前像素颜色
* */
function getPxInfo(imageData,x,y) {
var color = []
color[0] = imageData.data[(y*imageData.width + x)*4]
color[1] = imageData.data[(y*imageData.width + x)*4 + 1]
color[2] = imageData.data[(y*imageData.width + x)*4 + 2]
color[3] = imageData.data[(y*imageData.width + x)*4 + 3]
return color
}
/*
* 获取当前imageData对象中的x，y的颜色
* */
function setPxInfo(imageData,x,y,color) {
imageData.data[(y*imageData.width + x)*4] = color[0]
imageData.data[(y*imageData.width + x)*4 + 1] = color[1]
imageData.data[(y*imageData.width + x)*4 + 2] = color[2]
imageData.data[(y*imageData.width + x)*4 + 3] = color[3]
return imageData
}
</script>
</html>
