图片转换成字符输出

最新推荐文章于 2022-01-26 10:26:17 发布

行业报告智库

最新推荐文章于 2022-01-26 10:26:17 发布

阅读量1.5k

点赞数 1

分类专栏： html js

本文链接：https://blog.csdn.net/u011948420/article/details/53841872

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

图片转换成字符输出

哈哈，第一次写博客，也是第一次写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>