媒介

彷佛没啥好说的~

也许做法

• 先由filereader猎取图片的base64，掌握图片天生，但不显现。
• 然后将图片按比例设置好紧缩后的宽高绘制在canvas画布上。
• 今后应用canvas的自带要领再次转换成base64，再对base64举行解码存储到数组缓存区，天生blob，然后建立下载链接就完了。

上代码，看解释就完了

//html
<input type="file" id="file"> //这里挑选图片
<canvas id="canvas"></canvas> //canvas画布

//js
document.getElementById('file').onchange = function () {
        console.log(this.files[0]);
        //注重这个files是数组
        reader.readAsDataURL(this.files[0]);
        var reader = new FileReader();
        reader.onload = function (e) {
            //下面这三行就能够完成文件挑选了图片今后，预览的功用，然则有些图片能够太大了影响页面观感，得一致减少下。
            //var img = new Image();  
            // img.src = e.target.result;  
            // document.body.appendChild(img);
            render(e.target.result) //这个要领完成图片的紧缩下载
        }  

}

    var MAX_H = 100;
    function render(src){  
        // 建立一个 Image 对象  
        var image = new Image();  
        // 设置src属性，加载图片内容，此时还未紧缩
        image.src = src;  
        // 绑定 load 事宜处理器，加载完成后实行  
        image.onload = function(){  
            // 猎取 canvas DOM 对象  
            var canvas = document.getElementById("canvas");  
            // 假如高度超标  
            if(image.height > MAX_H) {  
                // 宽度等比例缩放 *=  
                image.width *= MAX_H / image.height;  
                image.height = MAX_H;  
            }  
            // 猎取 canvas的 2d 环境对象, 有些上古浏览器不支持canvas
            var ctx = canvas.getContext("2d");  
            // canvas清屏  
            ctx.clearRect(0, 0, canvas.width, canvas.height);  
            // 把canvas宽高设置为图片宽高  
            canvas.width = image.width;  
            canvas.height = image.height;  
            // 将图象绘制到canvas上 
            //drawImage(img,startX,startY,endX,endY)
            ctx.drawImage(image, 0, 0, image.width, image.height);  
            //将绘制好的canvas图象转为DataURL
            //toDataURL(图片范例,图片质量)，这个图片质量越高就越清楚（雷同宽高）
            //canvas.toDataURL 返回的默许花样就是 image/png
            var data = canvas.toDataURL('image/jpeg',0.5);
           //猎取图片的dataUrl转成blob
           //这下面转blob的代码我也没搞懂，无百度了DataURL转blob就是这些代码了
            data = data.split(',')[1];
            data = window.atob(data);
            var ia = new Uint8Array(data.length);
            for (var i = 0; i < data.length; i++) {
                ia[i] = data.charCodeAt(i);
            };
            var blob = new Blob([ia], {
                type: "image/jpeg"
            });
            
            //天生blob文件的下载链接，把链接附在a便签上，把a便签到场dom中，点击就能够下载啦
            
            var url3 = URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url3;
            a.text = '测试图片';
            a.download = 'mytest.jpg';
            document.body.appendChild(a);
        };  
    };  

结果预览

后语

紧缩后上传的操纵，这里就不写了，百度下blob怎样天生file上传即可。