H5新属性实现图片压缩上传

liubulong

在一次app项中，遇到了图片上传的问题，现在的智能手机图片都很大，用户体验很不好，这就需要压缩了，前端怎么实现了，强大的canvas提供了便捷方法：
html:  <input type="file" accept="image/*" on-change="showFile($event)"/>
js:
function imgToBase64(file,maxLen,callBack){
    let img = new Image(),
        reader = new FileReader(),//读取文件
        fileType = file.type;//图片类型
    reader.onload = function (){
        let url = reader.result;//读取到的文件内容，这个属性值再读取操作完成之后才有效，且数据格式取决于读取操作是由哪个方法发起的，所以必须使用reader.onload
    }
    img.onload = function (){
        //图片原始尺寸
        let originWidth = img.width,
            originHeight = img.height,
            //最大尺寸限制
            maxWidth = 400 ,
            maxHeight = 400 ,
            //目标尺寸
            targetWidth = originWidth,
            targetHeight = originHeight;
        if(originWidth > maxWidth || originHeight > maxHeight){
            if(originWidth / originHeight > maxWidth / maxHeight){
                //更宽，按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            }else{
                targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
        }
        //生成canvas
        let canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');
        canvas.width = targetWidth;
        canvas.height = targetHeight;
        ctx.drawImage(img,0,0,targetWidth,targetHeight);
        let base64 = canvas.toDataURL(fileType,0.92);//品质参数默认0.92，必须是格式为image/jpeg时才生效
        callBack(base64);
    }
    reader.readAsDataURL(file);

}
function showFile(e){
    let files = e.currentTarget.files;
    for(var i = 0;i<files.length;i++){
        imgToBase64(files[i],400,function(base64){
            //直接调用ajax上传base64就完成啦
            ajax....
        })
    }
}