【占个位置】js实现图像2ASCII(包括图片预览)

    今天不想写，来个最后效果明天有时间在具体写写，分几个部分吧，包括图像处理，js文件处理（图像预览）等。

　　

---

　 2017-3-27更新

 　　　　思路：1、canvas加载图片--->2、获得图片rgb---->3、rgb2grgb---->4、绘制相应的字符-----5、若需要部署上线的话，需要一个js读本地文件的操作。   目前大概就是这样。

 

　　　　　　1、canvas加载图片

　　　　　　　　

        img2=new Image();
	img2.src="your.jpg";
	img.onload=function(){//进行下面步骤}    

　　　　 　　2、获得图片rgb

　　　　　　

                var ctx=$("#canvas")[0].getContext("2d");
		ctx.drawImage(img,0,0,width,width);
		imgData=ctx.getImageData(0,0,width,width);
		imgData=imgData.data;            

　　

　　　　　上面就是将img绘制到canvas上面，然后再获取canvas上面的图片信息，得到imgData. 多说一局imgData 为Uint8ClampedArray对象，这个对象data值为0-255。详细介绍后面再开一篇吧，反正取得data属性值就是我们要的rgba.

　　　　　特别的，imgData.data里面是[[r,g,b,a],......]这么一个格式。然后获取就好

　　　　　　　　

        var R=imgData[(i*width+j)*4+0];
	var G=imgData[(i*width+j)*4+1];
	var B=imgData[(i*width+j)*4+2];
	var A=imgData[(i*width+j)*4+3];        

　　　　　像上面酱。就获得了RGBA,当然这里我们只需要前三个就好了。

　　　　　3、rgb2grgb

　　　　　　　　　　　　　　为了获得灰度图片，原理就是找到一个方法将三维坐标的R,G,B，映射到直线R=G=B上面，这样就将彩色的图像映射成灰度图了，我这里用的就直接，将int(R+G+B)/3当做gray就好了，因此也完成

　　　　　4、绘制字符

　　　　　　　　　　　　　　当然应该是偏向黑色的，用复杂点的字符，类似e,z,s之类的，偏向白色用i,l啊之类的字符，自己把握，绘制到相应坐标

　　　　　5、图片预览

　　　　　　　　　　　　　　其实是选择需要处理的图片，原来肯定是要先上传到服务器，然后再来处理，不过这里可以用新的js的API

　　　　　　　　　　　　　　　　

        console.log("加载图片")
	 var file  = $("#file")[0].files[0];
	 var reader = new FileReader();
	 reader.onloadend = function ()
		 {
		  img.src = reader.result;
		  console.log(reader.result)
		 }
		 if (file) 
			 {
			  reader.readAsDataURL(file);
			 } 
		else 
			{
			  img.src = "";
			 }

　　

　　　　　　　　　　　　　　关于这个文件操作等，后面再开一个，挖了好多坑。囧。

　　　　　　　　　　　　　　最后，就没有最后了，这个只是昨天晚上突发奇想想试试，自己拍脑袋想的，估计肯定有个什么很厉害的方法之类的可以实现这个功能，不过，作为实现下自己的想法够了。最后来张女神图，猜得出是谁么？（P.S且以为可以开发一个猜图的小游戏）

　　　　　　　　　　　　　　

 　　　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　刚刚又想了好多有意思的，比如图片上色（已实现），让人物动起来，通过摄像头实现实施的捕捉，另外有一个实现平面转成立体图像，这个是我一直想要实现的，因为木有图像相关知识，也没有了解相关领域，待我去了解了解再来唠唠。。。呵呵哒