jquery - php 若圖片超過size則壓縮？

Question

想請問一下
假設我讓使用者上傳圖片
但限制3MB內
但若圖片超過3MB
如何直接壓縮該圖片至3MB以下 然後再上傳呢？

Answer 1

上传图片可以知道大小的，如果压缩的话，一般最大宽或者最大高，按比例压缩或者等面积压缩。
如果上传前压缩当然是最好的，压缩好再上传，这个用js搞定。不过这个要用到html5,浏览器兼容性问题。

如果上传后再压缩，这个用PHP可以搞定。

以下是js上传后压缩

//input file绑定upload事件 <input  type="file" onchange="upload(this)" placeholder="">
function upload(obj) {
     var f = obj.files[0];
     var image = new Image();
     fr.onload = function () {
        //裁剪
        image.src = this.result;

        var cvs = document.createElement('canvas');
        var ctx = cvs.getContext('2d');
        var scale = 1;
        image.onload = function() {
            var max_width = 750, max_height = 480;
            //如果   [宽/高]   >  [最大宽/高]
            if (image.width / image.height >= max_width / max_height) {
                //如果 [宽]>[最大宽] 
                if (image.width > max_width) {
                    cvs.width = max_width;
                    cvs.height = (image.height * max_width) / image.width;
                } else {
                    cvs.width = image.width;
                    cvs.height = image.height;
                }
            } else {
                //如果 [高]>[最大高] 
                if (image.height > max_height) {
                    cvs.height = max_height;
                    cvs.width = (image.width * max_height) / image.height;
                } else {
                    cvs.width = image.width;
                    cvs.height = image.height;
                }
            }

            // if(image.width > 750 || image.height > 480){  
            // //1000只是示例，可以根据具体的要求去设定    
            //     if(image.width > image.height){    
            //         scale = 750 / image.width;  
            //     }else{    
            //         scale = 485 / image.height;    
            //     }    
            // }  
            // cvs.width = image.width*scale;    
            // cvs.height = image.height*scale;     
            //计算等比缩小后图片宽高  
           
            var mpImg = new MegaPixImage(image);
            mpImg.render(cvs, {
              maxWidth: 750,
              maxHeight: 480,
              quality: 0.8,
              orientation: Orientation
            });
            //得到裁剪后base64位图片
            var newImageData = cvs.toDataURL("image/jpeg", 0.8);
            //ajax传到后台处理
    }
    
 } 

Answer 2

你特别提到 上传前压缩

既然是在上传前压缩，那么和PHP就没有关系了，PHP能做到的是上传之后压缩，也就是说不论大小先上传了再处理。

图片的压缩并不具备确定性，也就是说是否能压缩到3M以下，电脑和你都不知道，只有压缩之后才知道。
何况超过3M的图片在分辨率和质量上面都是非常大了。

解决方案

• 如果不使用上传控件，你能做的只有在上传之后，使用PHP提示上传大小超出限制

• 如果使用百度出品的 webuploader，以及swfupload v2.5.0beta3 可以支持在上传前就对图片的分辨率以及品质进行压缩，并且可以限制3M以上就不让上传，希望能满足你的需求

• 支持IE 6 ~ Chrome ~ Firefox