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

问题描述

问 题

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

解决方案

上传图片可以知道大小的，如果压缩的话，一般最大宽或者最大高，按比例压缩或者等面积压缩。
如果上传前压缩当然是最好的，压缩好再上传，这个用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传到后台处理
    }
    
 } 

这篇关于jquery - php 若圖片超過size則壓縮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！