用canvas自定义马赛克

公告

View Post

使用自定义方法制作马赛克
<!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>
posted on 2021-11-10 10:29 黄文超阅读(133) 评论(0) 收藏举报
刷新页面返回顶部