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.ο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】大家一起讨論技術。

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

喜歡的朋友可以關注下。