前端進行圖片打碼

時間 2019-11-05

標籤前端進行圖片简体版

原文原文鏈接

圖片打碼

原本是想作圖片油畫化，不過什麼最高色彩頻次什麼的有點懵，而後就整成了圖片打碼，加油堅持看吧，我以爲可能過兩天就OK。javascript

如何實現的

把圖片轉換成數組，而後將整個圖片分紅小塊（我分的是10px一小塊），而後對每個小塊內的顏色（三原色）想加求均值，而後獲得新的數組，而後圖片就都是馬賽克了！html

代碼

// 我這裏不少參數是寫死的，像畫布的高寬，應該優化成可配置的，但是懶了，等油畫那個實現了再說吧
<!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>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。