HTML5 input file 图片上传，压缩，上传，预览

 <input type="file" id="textfile" accept="image/*"/>上传

<div class="upP_img1"></div>预览框

$('#textfile').on('change', function() {

        var reader = new FileReader();//新建获取file的读取文件
        var imgsrc = null;
         var _file = this.files[0],  //获取的的图片
            fileType = _file.type;  //图片类型
            console.log(fileType);  
        reader.readAsDataURL(this.files[0]);//输出base64图片
        reader.onload = function(e) {//字面理解是加载图片，得到结果吧，不是很理解
            imgsrc = this.result;//输出结果
            // 压缩
            var image=new Image();//新建图片
            image.src=imgsrc;
            image.onload=function(){
                var cvs=document.createElement('canvas');//画布
                var cvx =cvs.getContext('2d');//
                // draw image params
                cvs.width=this.width;
                cvs.height=this.height;                
                cvx.drawImage(this, 0, 0,this.width,this.height);//画图
                var newImageData = cvs.toDataURL(fileType,0.2);//这是压缩，具体的看.toDataURL api 输出base64
              

                console.log(newImageData);

                $('.upP_img1').html('<img id="newimg" src="' + newImageData + '">');
                console.log(this.width+'--'+this.height);
                // 上传图片后的以宽高充满判断    
                var imgscale2 = this.width / this.height;
               var photoscale2 = $('.upP_img1').width() /$('.upP_img1').height();
                if (imgscale2 > photoscale2) {
                    $('#newimg').css({ "width": "100%", "height": "auto" });
                } else {
                    $('#newimg').css({ "width": "auto", "height": "100%" });
                }
            }
        }

    });

$.ajax({

url:url,

type:post,

data:JSON.stringify($('#newimg').attr('src'))，success:function(){},error:function(){}

});

值得一提的是，canvs画出来的图片比上传的原图片要大，39k的原图画出来有180k 这是最骚的，5m压缩20%出来有500k。

 http://www.zhangxinxu.com/study/201707/js-compress-image-before-upload.html这是别人的专业答案