談談圖片上傳及canvas壓縮的流程
我們通常在做圖片上傳的時候都會遇上這樣的情況,一是後端介面限制上傳圖片的大小,或者是即使後端沒有限制大小,因為圖片太大在前端渲染時太慢,造成頁面載入體驗較差。因此我們很有必要對上傳的圖片進行壓縮。
本文在gitthub做了收錄:github.com/
本文主要包括以下流程:
- 使用者通過input框選擇圖片
- 使用FileReader進行圖片預覽
- 將圖片繪製到canvas畫布上
- 使用canvas畫布的能力進行圖片壓縮
- 將壓縮後的Base64(DataURL)格式的資料轉換成Blob物件進行上傳
Input 標籤來獲取圖片
通過設定input標籤的type屬性為file,來讓使用者可以選擇檔案,設定accept限制選擇的檔案型別,繫結onchange事件,來獲取確認選擇後的檔案
<inputtype="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 })
}
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
將圖片上傳到服務端
- 建立一個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 用於上傳。