在日常的一些项目中会有上传图片之类的接口，如果图片过大了再上传的时候是非常的耗时以及占用资源，在这里就给大家分享一下如何在js中把大的图片压缩成小的图片，我这里的功能是用户点击按钮调用相机或者选择文件后进行压缩的：

直接上代码

  /*
   三个参数
   file：一个是文件(类型是图片格式)，
   w：一个是文件压缩的后宽度，宽度越小，字节越小
   objDiv：一个是容器或者回调函数
   photoCompress()
   */

function photoCompress(file,w,objDiv){

        var ready=new FileReader();
        /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
        ready.readAsDataURL(file);
        ready.οnlοad=function(){
            var re=this.result;
            canvasDataURL(re,w,objDiv)
 }

}

function canvasDataURL(path, obj, callback){

        var img = new Image();
        img.src = path;
        img.onload = function(){
            var that = this;
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            callback(base64);
        }

}

function setImagePreview(e,a) {

var fileMsg = e.files[0];
if(fileMsg==null){
            return;
}
//文件名
var fileName = fileMsg.name;
//大小 字节 
var fileSize = fileMsg.size;

/*调用
* fileMsg 是input type="file" 的值
* quality 压缩图片质量 范围是（0-1）
* base64Codes  就是最终压缩成的图片
*/
photoCompress(fileMsg, {
    quality: 0.3
 }, function(base64Codes){
   //这里可以一个图片预览 把base64Codes 赋值给img的src即可
});

}

html的写法：

其实图片压缩是很简单的，这里说明一下，如果需要上传到服务器的话，把base64Codes当成一个字符串传到服务器即可，mysql表中对应的字段类型可用用longtext来储存，但是longtext的长度也是有限制的，所以在上传的时候要控制文件大小。

如有需要可以加我Q群【308742428】大家一起讨论技术。

后面会不定时为大家更新文章，敬请期待。

喜欢的朋友可以关注下。