我們通常在做圖片上傳的時候都會遇上這樣的情況，一是后端接口限制上傳圖片的大小，或者是即使后端沒有限制大小，因為圖片太大在前端渲染時太慢，造成頁面加載體驗較差。因此我們很有必要對上傳的圖片進行壓縮。

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

本文主要包括以下流程：

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

Input 標簽來獲取圖片

通過設置input標簽的type屬性為file，來讓用戶可以選擇文件，設置accept限制選擇的文件類型，綁定onchange事件，來獲取確認選擇后的文件

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

FileReader

FileReader是什么，我們先來看看官方文檔的介紹

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

FileReader常用的兩個方法如下：

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

在圖片上傳中，我們可以通過readAsDataURL()方法進行了文件的讀取，并且通過result屬性拿到了圖片的Base64(DataURL)格式的數據，然后通過該數據實現了圖片預覽的功能

<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)格式的數據。

drawImage()

drawImage()方法在畫布上繪制圖像、畫布或視頻。drawImage()方法也能夠繪制圖像的某些部分，以及/或者增加或減少圖像的尺寸。參數如下

• 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，把blobappend 到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 用于上傳。

到此這篇關于淺析圖片上傳及canvas壓縮的流程的文章就介紹到這了,更多相關圖片上傳canvas壓縮內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持武林網！