談談圖片上傳及canvas壓縮的流程

時間 2020-06-11

標籤談談圖片上傳 canvas 壓縮流程简体版

原文原文鏈接

咱們一般在作圖片上傳的時候都會趕上這樣的狀況，一是後端接口限制上傳圖片的大小，或者是即便後端沒有限制大小，由於圖片太大在前端渲染時太慢，形成頁面加載體驗較差。所以咱們頗有必要對上傳的圖片進行壓縮。前端

本文在gitthub作了收錄：github.com/Michael-lzg…vue

本文主要包括如下流程：webpack

用戶經過 input 框選擇圖片
使用 FileReader 進行圖片預覽
將圖片繪製到 canvas 畫布上
使用 canvas 畫布的能力進行圖片壓縮
將壓縮後的 Base64(DataURL) 格式的數據轉換成 Blob 對象進行上傳

Input 標籤來獲取圖片

經過設置 input 標籤的 type 屬性爲 file，來讓用戶能夠選擇文件，設置 accept 限制選擇的文件類型，綁定 onchange 事件，來獲取確認選擇後的文件git

<input type="file" accept="image/*" onchange="loadFile(event)"

FileReader

FileReader 是什麼，咱們先來看看官方文檔的介紹github

FileReader 對象容許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩衝區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

FileReader 經常使用的兩個方法以下：web

FileReader.onload:處理 load 事件。即該鉤子在讀取操做完成時觸發，經過該鉤子函數能夠完成例如讀取完圖片後進行預覽的操做，或讀取完圖片後對圖片內容進行二次處理等操做。
FileReader.readAsDataURL：讀取方法，而且讀取完成後，result 屬性將返回 Data URL 格式（Base64 編碼）的字符串，表明圖片內容。

在圖片上傳中，咱們能夠經過 readAsDataURL() 方法進行了文件的讀取，而且經過 result 屬性拿到了圖片的 Base64(DataURL) 格式的數據，而後經過該數據實現了圖片預覽的功能vue-cli

<div class="container">
  <input type="file" accept="image/*" onchange="loadFile(event)" />
</div>
<script>
  const loadFile = function (event) {
    let file =  event.target.files[0]
    const reader = new FileReader()
    reader.onload = function () {
      console.log(reader.result)
      ...
    }
    reader.readAsDataURL(file)
  }
</script>

canvas 壓縮圖片

這是圖片上傳壓縮的核心所在，咱們先使用 CanvasRenderingContext2D.drawImage() 方法將上傳的圖片文件在畫布上繪製出來，再使用 Canvas.toDataURL() 將畫布上的圖片信息轉換成 base64(DataURL) 格式的數據。npm

drawImage()

drawImage() 方法在畫布上繪製圖像、畫布或視頻。drawImage() 方法也可以繪製圖像的某些部分，以及/或者增長或減小圖像的尺寸。參數以下canvas

img 規定要使用的圖像、畫布或視頻。
sx 可選。開始剪切的 x 座標位置。
sy 可選。開始剪切的 y 座標位置。
swidth 可選。被剪切圖像的寬度。
sheight 可選。被剪切圖像的高度。
x 在畫布上放置圖像的 x 座標位置。
y 在畫布上放置圖像的 y 座標位置。
width 可選。要使用的圖像的寬度。（伸展或縮小圖像）
height 可選。要使用的圖像的高度。（伸展或縮小圖像）

var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
// 先建立圖片對象
var img = new Image()
img.src = './images/1.jpg'

// 圖片加載完以後
img.onload = function () {
  ctx.drawImage(img, 206, 111, 32, 38, 100, 100, 32, 38)
}

Canvas.toDataURl()

Canvas.toDataURl() 方法能夠將 canvas 畫布上的信息轉換爲 base64(DataURL) 格式的圖像信息，純字符的圖片表示形式。該方法接收 2 個參數：後端

mimeType(可選): 表示須要轉換的圖像的 mimeType 類型。默認值是 image/png，還能夠是 image/jpeg， image/webp 等。
quailty(可選)：quality 表示轉換的圖片質量。範圍是 0 到 1。圖片的 mimeType 須要是 image/jpeg 或者 image/webp，其餘 mimeType 值無效。默認壓縮質量是 0.92。

var canvas = document.createElement('canvas')
canvas.toDataURL("image/jpeg" 0.8)

到這裏，咱們先來上 canvas 壓縮圖片的代碼

function compress(base64, quality, mimeType) {
  let canvas = document.createElement('canvas')
  let img = document.createElement('img')
  img.crossOrigin = 'anonymous'
  return new Promise((resolve, reject) => {
    img.src = base64
    img.onload = () => {
      let targetWidth, targetHeight
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH
        targetHeight = (img.height * MAX_WIDTH) / img.width
      } else {
        targetWidth = img.width
        targetHeight = img.height
      }
      canvas.width = targetWidth
      canvas.height = targetHeight
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, targetWidth, targetHeight) // 清除畫布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      let imageData = canvas.toDataURL(mimeType, quality / 100)
      resolve(imageData)
    }
  })
}

將 base64 轉化爲文件

經過 window.atob 將 base-64 字符串解碼爲 binaryString（二進制文本）；
將 binaryString 構造爲 multipart/form-data 格式；
用 Uint8Array 將 multipart 格式的二進制文本轉換爲 ArrayBuffer。

function dataUrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(',')[1])
  let ab = new ArrayBuffer(bytes.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  return new Blob([ab], { type: mimeType })
}

將圖片上傳到服務端

建立一個 FormData，把 blob append 到 FormData 裏面
請求服務端接口，提交圖片

function uploadFile(url, blob) {
  let formData = new FormData()
  let request = new XMLHttpRequest()
  formData.append('image', blob)
  request.open('POST', url, true)
  request.send(formData)
}

ps：在實際開發中，咱們要不要把圖片轉化爲 FormData 形式上傳到服務端，這就看具體的業務須要了。咱們能夠上圖片上傳到騰訊雲，直接返回一個'https.xxx.jgp'的圖片 url 用於上傳。