base64之js壓縮圖片

在日常的一些項目中會有上傳圖片之類的接口，如果圖片過大了再上傳的時候是非常的耗時以及占用資源，在這里就給大家分享一下如何在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.onload=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的寫法：

 <input class="btn takepicture" type="file" name="img5q" id="img5q" accept="image/*"   onchange="javascript:setImagePreview(this,5);"/>

其實圖片壓縮是很簡單的，這里說明一下，如果需要上傳到服務器的話，把base64Codes當成一個字符串傳到服務器即可，mysql表中對應的字段類型可用用longtext來儲存，但是longtext的長度也是有限制的，所以在上傳的時候要控制文件大小。

如有需要可以加我Q群【308742428】大家一起討論技術。

后面會不定時為大家更新文章，敬請期待。

喜歡的朋友可以關注下。
如果對你有幫助，請打賞一下！！！