js 圖片壓縮轉成base64

最後更新：2017-07-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：init style back typeof getc image console 畫布 obj

HTML:

<!doctype html>  <html>      <head>          <meta charset="UTF-8">          <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />          <title>測試</title>          <link rel="stylesheet" href="./css/index.css" />          <link rel="stylesheet" href="./css/index_1.css" />          <script type="text/javascript" src="script/jquery.min.js"></script>          <script type="text/javascript" src="script/ys.js"></script>      </head>      <body>          <div class="free-upload">  H5頁面            <p>                  上傳您的約會照片，上傳圖片              </p>              <div class="free-upload-photo">                  <span id="photo_img"></span>                  <input type="file" id="photo" onchange="start_upload(this)"/>              </div>          </div>          <img src="" id="csimg" width="200" height="200"/>      </body>      <script>          function start_upload(obj){               if(!isCanvasSupported){                  console.log("2222");               }else{                  compress(event, function(base64Img){                      $("#csimg").attr("src",base64Img);                      console.log(base64Img);                      // 如需儲存  或 把base64轉成圖片  ajax提交幕後處理                      // 我這裡採用ajax方式 自己封裝的                       ajax(‘qnl_app/tes_ac_img‘,{‘base64Img‘:base64Img},function(date){                          console.log(JSON.stringify(date));                      });                  });               }          }                </script>  </html>

JS:

//判斷是否存在畫布  function isCanvasSupported() {      var elem = document.createElement(‘canvas‘);      return !!(elem.getContext && elem.getContext(‘2d‘));  }    //壓縮方法  function compress(event, callback) {      if ( typeof (FileReader) === ‘undefined‘) {          console.log("當前瀏覽器核心不支援base64表徵圖壓縮");          //調用上傳方式  不壓縮      } else {          try {              var file = event.currentTarget.files[0];               if(!/image\/\w+/.test(file.type)){                         alert("請確保檔案為映像類型");                        return false;                 }               var reader = new FileReader();              reader.onload = function (e) {              var image = $(‘<img/>‘);              image.load(function () {              console.log("開始壓縮");              var square = 700;              var canvas = document.createElement(‘canvas‘);              canvas.width = square;              canvas.height = square;              var context = canvas.getContext(‘2d‘);              context.clearRect(0, 0, square, square);              var imageWidth;              var imageHeight;              var offsetX = 0;              var offsetY = 0;              if (this.width > this.height) {                imageWidth = Math.round(square * this.width / this.height);                imageHeight = square;                offsetX = - Math.round((imageWidth - square) / 2);              } else {                imageHeight = Math.round(square * this.height / this.width);                imageWidth = square;                offsetY = - Math.round((imageHeight - square) / 2);              }              context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);              var data = canvas.toDataURL(‘image/jpeg‘);                  //壓縮完成執行回調                 callback(data);              });              image.attr(‘src‘, e.target.result);              };              reader.readAsDataURL(file);          } catch(e) {              console.log("壓縮失敗!");              //調用上傳方式  不壓縮          }      }  }

js 圖片壓縮轉成base64

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More