js实现图片转成ASCII码

之前有朋友问我微信头像（ASCII码构成的头像）怎么搞的，感觉很有意思，所以趁着项目转测没啥bug把这个写了。

canvas实现

直接上代码了，不啰嗦。

<body>
        <input type="file"/>
        <canvas id="canvas"></canvas>
        <div id="img"></div>
        <script>
            $("input").on('input',function(){
                let _this = this;
                var file = $("input")[0].files[0];
                var reader = new FileReader();
                reader.onload=function(){
                    var canvas = document.getElementById("canvas");
                    var context = canvas.getContext("2d");
                    var img = new Image();
                    img.src = this.result;
                    img.onload =function(){
                        this.width = this.width*0.2;
                        this.height = this.height*0.2;//图片像素太大所以将图片品质压缩下
                        invert(this,this.width,this.height);
                    };
                    function invert(img,w,h) {
                        canvas.width = w;
                        canvas.height = h;
                        context.drawImage(img,0,0,w,h);
                        //获取图片对象以及元素点的数组
                        var img1 = context.getImageData(0, 0, w, h);
                        var data = img1.data;
                        //转换灰度图
                        var arr=["M","N","H","Q","$","O","C","?","7",">","!",":","–",";","."];
                        var result=[];
                        for (var i = 0, len = data.length; i < len; i += 4) { //一个像素点对应数组种四个元素
                            var avg=(data[i]+data[i+1]+data[i+2])/3;
                            var num=Math.floor(avg/18); //arr长度为14，要让num落在0-14中，而rgb为0-255，因此除18
                            result.push(arr[num]);
                            if((i+4)%(w*4)==0&&i!=0){   //ASCII码换行
                                result.push("<br/>")
                            }
                        }
                        document.getElementById("img").innerHTML=result.join();
                    }
                }
                reader.readAsDataURL(file)
            })
        </script>
    </body>

综上，不解释了都是些很简单的东西。

edit by AmamiRyoin