前端實現圖片壓縮上傳

前端實現圖片壓縮上傳我以爲仍是頗有必要的, 如今移動web頁面愈來愈多, 活動頁不少都牽涉到圖片上傳難問題, 而用戶手機像素又很高, 隨隨便便一張圖片就是5~10M, 要是一次要上傳多張圖片的話, 第一個時間花費太多, 第二個就是用戶的流量也要耗費很多, 而若是實現前端圖片壓縮則能很好的避開這兩個問題. 個人基本思路是用戶經過input[file]輸入框添加了文件後, 讀取圖片信息, 將圖片畫到Canvas畫布上, 而後再轉成圖片來實現壓縮上傳.

核心API

canvas.getContext('2d').drawImage(img, dx, dy, dWidth, dHeight)

• img 圖片對象
• dx 將圖片畫到canvas上時圖片左上角在畫布上的x座標
• dy 將圖片畫到canvas上時圖片左上角在畫布上的y座標
• dWidth 將圖片畫到canvas上時圖片要畫的寬度
• dHeight 將圖片畫到canvas上時圖片要畫的高度

實現流程

1. 用戶點擊input[file]選擇圖片後的邏輯

<input type="file" accept="image/*" onchange="uploadImageHandle"/>

<script>
	function uploadImageHandle(e) {
	// 建立實例
	var reader = new FileReader(), img = new Image();
	// 讀取上傳的圖片的信息(lastModified, lastModifiedDate, name, size, type等)
	var file = e.target.files[0];
	// 記下上傳的圖片的類型, 後面會用到
	var fileType = file.type;
	// 生成canvas畫布
	var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    // MDN: 該方法會讀取指定的 Blob 或 File 對象。讀取操做完成的時候，
    // readyState 會變成已完成（DONE），並觸發 loadend 事件，
    // 同時 result 屬性將包含一個data:URL格式的字符串（base64編碼）以表示所讀取文件的內容。
    // 也就是說, 將File對象轉化爲base64位字符串
    reader.readAsDataURL(file);
    // 上一步是異步操做, 讀取完成後會執行onload事件, 而base64的字符串在e.target.rusult中
    reader.onload = function(e) {
        // 得到圖片dom
        img.src = e.target.result;
        console.log( img )
    }
    img.onload = function() {
      // 圖片原始尺寸
      var originWidth = this.width;
      var originHeight = this.height;
      // 最大尺寸限制
      var maxWidth = 800, maxHeight = 800;
      // 目標尺寸
      var targetWidth = originWidth, targetHeight = originHeight;
      // 圖片尺寸超過800x800的限制
      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);
      // 將圖片劃到canvas上
      context.drawImage(img, 0, 0, 800, 800);
      // 把canvas轉成base64格式並去除頭
      var base64 = canvas.toDataURL(fileType).replace(/^data:image\/(jpeg|jpg|png|gif);base64,/,'');
      // 上傳base64, 若是須要上傳圖片只須要參照上面的操做, 重複將base64設置爲圖片上的src就好了. 固然, 須要在去處頭以前
      axios.post('https://yourdomain.com/api/xxx', {
      	imageSrc: base64
      }).then(res => {
      	console.log( res )
      }).catch(err => {
      	console.log( err )
      })
	}
</script>
複製代碼

如此, 就實現了圖片的壓縮上傳功能, 其實仍是很簡單的, 這麼沒有作實時預覽功能, 不過已經寫到這一步了(FileReader), 實現預覽功能也很是容易, 這就是今天內容的所有了, 圖片上傳使用得愈來愈頻繁, 作個記錄, 免得每次作的時候都要去翻資料.