图片转换成字符输出

来源：互联网发布：阿里大数据平台编辑：程序博客网时间：2024/06/07 17:00

图片转换成字符输出

哈哈，第一次写博客，也是第一次写html,这个算法很简单，但是比较有趣，然后就亲自动手实践看效果。。。

好了，二话不说，简单粗暴，上代码，上图。

<!doctype html><html lang="en-us"> <body><canvas id="canvas"></canvas><script>    //创建画布    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    canvas.width = 640;    canvas.height = 853;    var img = new Image();    img.src = "t1.jpg";    img.onload =function(){        invert(this);    };    function invert(img) {context.drawImage(img,0,0);//获取图片对象以及元素点的数组var img1 = context.getImageData(0, 0, 640, 853);var data = img1.data;//根据灰度分级var arr=["1","2","3","4","5","6","7","8","9",",",",",",",",",".",".","."];var result=[];for (var i = 0, len = data.length; i < len; i += 8) {//var avg=(data[i]+data[i+1]+data[i+2])/3;var avg=(data[i]*0.3+data[i+1]*0.59+data[i+2]*0.11);var num=Math.floor(avg/18);result.push(arr[num]);if(i%2560==0&&i!=0){result.push("<br>")i+=2560;}}var opt=document.getElementById("inner");opt.innerHTML=result.join();    }</script></script><!-- 测试火狐效果比较好 --><div id='inner' style="-webkit-transform : scale(0.2,1);font-size:12px;line-height:2px;-moz-transform : scale(1,1);font-size:2px;line-height:2px;-ms-transform : scale(1.5,1.5);font-size:2px;line-height:2px;" ></div>  </body></html>

原图

输出后

结语

由于字符的输出会受到样式的影响，不同内核的浏览器输出后形状可能会出现挤压变形(调整样式什么的最麻烦了╥﹏╥...)，以上的图是在火狐里输出的结果。算法原理是比较容易理解，首先获取图片的每个像素值，然后进行灰化，再用分级的字符输出代表不同的灰度，最后输出一串字符串缩放看起来就像一张灰化后的图片。

0 0