input file属性上传压缩图片

参考链接: link

代码展示

//点击事件
//压缩的思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层将canvas等比例缩放，
//然后用canvas的drawImage将图片与canvas合起来，然后在转成吧canvas的base64转成file即可
$("#test").unbind().change(function () {
    // 选择的文件对象
    var file = $(".test")[0].files[0];
    //取消上传
    if (file == undefined) {
        return;
    }
    let reader = new FileReader();
    //读取file
    reader.readAsDataURL(file);
    reader.onloadend = function(e) {
        let img = new Image() //新建一个img标签（还没嵌入DOM节点)
        img.src = e.target.result //将图片的路径设成file路径
        img.onload = function() {
            // 缩放图片需要的canvas
            let canvas = document.createElement('canvas'),
                context = canvas.getContext('2d'),
                // 图片原始尺寸
                originWidth = this.width,
                originHeight = this.height,
                // 最大尺寸限制
                maxWidth = 600,
                maxHeight = 600,
                // 目标尺寸
                targetWidth = originWidth,
                targetHeight = originHeight;
            // 图片尺寸超过400x400的限制
            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对图片进行缩放
            canvas.width = targetWidth;
            canvas.height = targetHeight;
            // 清除画布
            context.clearRect(0, 0, targetWidth, targetHeight);
            // 图片压缩
            context.drawImage(img, 0, 0, targetWidth, targetHeight);
            // 图片小于1M不压缩
            console.log("压缩前："+(file.size / 1024).toFixed(2) + 'kb');
            if (file.size > Math.pow(1024, 2)) {
                //canvas转为base64 缩放比例是0-1
                let data = canvas.toDataURL(file.type || 'image/png', 1.0);
                //压缩完成
                file = dataURLtoFile(data,file.name);
            }
            console.log("压缩后："+(file.size / 1024).toFixed(2) + 'kb');
            //ajax()....ajax上传file
        }
    }
});