图片转化字符组成的图

时间 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>复制代码