js 圖片轉base64並壓縮

---

 

參考博客：

tangxiujiang《js實現對上傳圖片進行壓縮並且預覽》

cw556666《js 圖片壓縮和上傳（base64轉file）》

---

 

html代碼：

<input type="file" id="image_file">

js代碼：

//base64 略縮圖
function base64ThumbImage(elementObj,maxWidth,maxHeight){
    if (typeof (FileReader) === 'undefined') {
        alert("抱歉，你的瀏覽器不支持發送圖片，請升級瀏覽器或切換瀏覽器再試！");
    } else {
        try {
            var file = elementObj.files[0];
            // 壓縮圖片需要的一些元素和對象
            var reader = new FileReader(),
            //創建一個img對象
            img = new Image();
            reader.readAsDataURL(file);
            // 文件base64化，以便獲知圖片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            // base64地址圖片加載完畢后執行
            img.onload = function () {
                // 縮放圖片需要的canvas（也可以在DOM中直接定義canvas標簽，這樣就能把壓縮完的圖片不轉base64也能直接顯示出來）
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                // 圖片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制，可通過設置寬高來實現圖片壓縮程度
                //var maxWidth = 500;
                //var maxHeight = 400;
                // 目標尺寸
                var targetWidth = originWidth,targetHeight = originHeight;
                // 圖片尺寸超過最大值的限制
                if(originWidth > maxWidth || originHeight > maxHeight) {
                    if(originWidth / originHeight > maxWidth / maxHeight) {
                        // 更寬，按照寬度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                // canvas對圖片進行縮放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除畫布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 圖片壓縮
                /*第一個參數是創建的img對象；第二三個參數是左上角坐標，后面兩個是畫布區域寬高*/
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                //壓縮后的圖片轉base64 url
                //canvas.toDataURL(mimeType, qualityArgument),mimeType 默認值是'image/png';
                //qualityArgument表示導出的圖片質量，只有導出為jpeg和webp格式的時候此參數才有效，默認值是0.92
                var base64_url = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
                return base64_url;
              }
          } catch (e) {
            alert('圖片轉Base64出錯啦！' + e.toString())
          }
      }
  }
  $(function(){
      $('#image_file').change(function(){
        base64ThumbImage(this,500,500);
    });
  });