圖片轉化字符組成的圖

時間 2019-11-05

標籤圖片轉化字符組成简体版

原文原文鏈接

圖片轉化字符串圖片

將圖片轉化成字符轉成的圖，就是下面那個，網上這個功能的python代碼不少。可是沒有js的，我以爲挺有意思就用js搞了下～javascript

如何實現的

本質是將圖片轉化成灰度照片（就是黑白照片的意思），而後根據每一個像素的灰度不一樣，替換成不一樣的字符（灰度越大——顏色越深，用的字符就便複雜——筆畫越多），而後比較重要的就是字符通常高度比寬度大，因此讀數組時，高度是跳一行一讀（也不是我想的，人家python代碼早就有，效果確實很好），而後我就console.log就行了！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="150px" height="200px"></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)
   }
}
let base = '#8XOHLTI)i=+;:,. '
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,150,200)
               strDataURI = canvas.toDataURL()//獲取canvas base64數據
           }
}
function myChange(){
   let canvas = document.getElementById("canvas")
   let ctx = canvas.getContext('2d')
   let imgData = ctx.getImageData(0, 0, 150, 200)
   JIENIGUI(imgData.data)
}
function JIENIGUI(data){
   let a = ''
   let j = 0
   for(let i=0;i<data.length;i=i+4){
       let num = parseInt((0.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * data[i+2])/256*base.length)
       a = a + base[num]
       j = j + 1
       if(j==150) {
           a = a + '\n'
           i = i + 600
           j = 0
       }
   }
   console.log(a)
}
</script>
</body>
</html>複製代碼

相關標籤/搜索

每日一句

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