图片打码

本来是想做图片油画化，不过什么最高色彩频次什么的有点懵，然后就整成了图片打码，加油坚持看吧，我觉得可能过两天就OK。

如何实现的

把图片转换成数组，然后将整个图片分成小块（我分的是10px一小块），然后对每一个小块内的颜色（三原色）想加求均值，然后得到新的数组，然后图片就都是马赛克了！

代码

// 我这里很多参数是写死的，像画布的高宽，应该优化成可配置的，可是懒了，等油画那个实现了再说吧
<!doctype html>
<html lang="en">
<head>
   <title>GET VIDEO</title>
   <meta charset="utf-8">
</head>
<body>
   <input id="photoimg" type="file" accept="image/*" onchange='readFile()'/>
   <button id="snap" onclick='myChange()'>转换油画</button>
   <canvas id="canvas" width="300px" height="400px"></canvas>
   <canvas id="canvas2" width="300px" height="400px"></canvas>
<script>
const i = 10
function readFile(){
   var file = document.getElementById('photoimg').files[0]
   var reader = new FileReader()
   reader.readAsDataURL(file)//转化成base64数据类型
   reader.onload = function(e){
       drawToCanvas(this.result)
   }
}
function drawToCanvas(imgData){
   console.log(imgData)
   let canvas = document.getElementById("canvas")
       var ctx = canvas.getContext('2d')
       var img = new Image
           img.src = imgData
           img.onload = function(){//必须onload之后再画
               ctx.drawImage(img,0,0,300,400)
               strDataURI = canvas.toDataURL()//获取canvas base64数据
           }
}
function myChange(){
   let canvas = document.getElementById("canvas")
   let ctx = canvas.getContext('2d')
   let imgData = ctx.getImageData(0, 0, 300, 400)
   BIKAQU(imgData)
}
function BIKAQU(imgData){
   imgData.data = JIENIGUI(imgData.data)
   // for(let i=0;i<imgData.data.length;i=i+4){
   //     avg = parseInt((imgData.data[i] + imgData.data[i+1] + imgData.data[i+2])/3)
   //     imgDatanew.data[i] = avg
   //     imgDatanew.data[i+1] = avg
   //     imgDatanew.data[i+2] = avg
   //     imgDatanew.data[i+3] = imgData.data[i+3]
   // }
   let canvas2 = document.getElementById("canvas2")
   let ctx = canvas2.getContext('2d')
   ctx.putImageData(imgData,0,0)
}
function JIENIGUI(data){
   //我们将一个色块的大小定义为10px*10px,现在我们可以求出色块中的平均颜色了
   for(let count = 0;count < 1200;count = count+1){
       let countBegin = count % 30 * 40 + 12000 * parseInt(count / 30)
       console.log(countBegin)
       let avg = [0, 0, 0, 0]
       for(let j=0;j<10;j++) {
           for(let i=0;i<40;i=i+4) {
               avg[0] = avg[0] + data[countBegin+i+1200*j]/100
               avg[1] = avg[1] + data[countBegin+i+1+1200*j]/100
               avg[2] = avg[2] + data[countBegin+i+2+1200*j]/100
               avg[3] = avg[3] + data[countBegin+i+3+1200*j]/100
           }
       }
       //重新付给颜色
       for(let j=0;j<10;j++) {
           for(let i=0;i<40;i=i+4) {
               data[countBegin+i+1200*j] = parseInt(avg[0])
               data[countBegin+i+1+1200*j] = parseInt(avg[1])
               data[countBegin+i+2+1200*j] = parseInt(avg[2])
               data[countBegin+i+3+1200*j] = parseInt(avg[3])
           }
       }
   }
   return data
}
</script>
</body>
</html>

前端进行图片打码

图片打码

如何实现的

代码