自動(dòng)上傳
image-conversion NPM 地址
安裝插件
npm i image-conversion --save
利用before-upload鉤子函數(shù)，在上傳之前用image-conversion插件的 compressAccurately 方法對(duì)圖片進(jìn)行壓縮處理扬绪。
<!--單圖上傳組件/按鈕-->
<template>
<el-upload
:action="uploadUrl"
name="avatar"
:multiple="false"
:show-file-list="false"
:before-upload="beforeUpload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
with-credentials
>
</el-upload>
</template>
<script>
import { compress, compressAccurately } from 'image-conversion'
export default {
setup(props, { emit }) {
// ...省略其他
const beforeUpload = file => {
const typeList = ['image/jpeg', 'image/png', 'image/gif']
const isTypeValid = typeList.includes(file.type)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isTypeValid) {
ElMessage.error('圖片格式只能是 JPG/PNG/GIF!')
}
if (!isLt2M) {
ElMessage.error('圖片大小不能超過(guò) 2MB!')
}
return new Promise((resolve, reject) => {
if (file.size / 1024 > 200) { // 大于 200 kb 就壓縮
compressAccurately(file, 200).then(res => {
// The res in the promise is a compressed Blob type (which can be treated as a File type) file;
console.log(res)
resolve(res)
})
} else if (isTypeValid && isLt2M) {
// 無(wú)需壓縮直接返回原文件
resolve(file)
} else {
reject()
}
})
}
return {
beforeUpload
}
}
}
</script>
手動(dòng)上傳
手動(dòng)上傳需將 el-upload 組件的auto-upload屬性設(shè)置為 false竖独，這樣before-upload鉤子便失效了。這時(shí)可以用on-change鉤子函數(shù)代替：
因?yàn)橛信可蟼鞯那闆r挤牛，注意這個(gè)鉤子是傳了幾個(gè)文件就觸發(fā)幾次的莹痢，我們也可以在提交表單時(shí)再去對(duì)圖片文件進(jìn)行壓縮處理。
同時(shí) image-conversion 是異步返回結(jié)果墓赴，無(wú)法接收竞膳，我們需要換一個(gè)方式，利用 canvas 畫(huà)布對(duì)圖片進(jìn)行壓縮：
其核心原理就是把一張大的圖片诫硕，直接畫(huà)在一張小小的畫(huà)布上顶猜。此時(shí)大圖片就變成了小圖片，壓縮就這么實(shí)現(xiàn)了痘括。
canvas的drawImage API：CanvasRenderingContext2D.drawImage()
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx, dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
image：即需繪制到上下文的圖片元素长窄。允許任何的 canvas 圖像源(CanvasImageSource)滔吠，可以是頁(yè)面上獲取的 DOM 對(duì)象，也可以是虛擬 DOM 中的圖片對(duì)象 (我們的上傳操作就是虛擬 DOM 對(duì)象挠日，并沒(méi)有真正繪制到頁(yè)面上)疮绷。
dx, dy, dWidth, dHeight：
表示在 canvas 畫(huà)布上規(guī)劃處一片區(qū)域用來(lái)放置圖片，dx, dy分別為目標(biāo) canvas元素的左上角X 嚣潜、Y軸坐標(biāo)坐標(biāo)冬骚，dWidth, dHeight表示canvas元素上用于顯示圖片的區(qū)域大小，允許對(duì)繪制的 image 進(jìn)行縮放懂算。
如果沒(méi)有指定sx,sy,sWidth,sHeight這4個(gè)參數(shù)只冻，則圖片會(huì)被拉伸或縮放在這片區(qū)域內(nèi)。
實(shí)際操作很簡(jiǎn)單计技，比如需要把一張圖片的尺寸縮放為400*200大邢驳隆：
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 200;
// 核心 js
ctx.drawImage(img, 0, 0, 400, 200)
那如何把 canvas 畫(huà)布轉(zhuǎn)換成 img 圖像呢，canvas提供了2個(gè)轉(zhuǎn)圖片的方法：
-
canvas.toDataURL(type, quality)
API 地址：HTMLCanvasElement.toDataURL()
把圖片轉(zhuǎn)換成 base64 格式信息垮媒，純字符的圖片表示法舍悯。
-
type： 圖片格式，默認(rèn)image/png -
quality：在指定圖片格式為 image/jpeg 或 image/webp的情況下睡雇，可以在 0 到 1 的區(qū)間選擇圖片的質(zhì)量萌衬。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92它抱。
-
toBlob(callback, type, quality)：
API 地址：HTMLCanvasElement.toBlob()
把 canvas 轉(zhuǎn)換成 Blob文件秕豫，通常用在文件上傳中，因?yàn)槭嵌M(jìn)制的观蓄，對(duì)后端更加友好馁蒂。
-
callback：回調(diào)函數(shù)，轉(zhuǎn)換好的Blob對(duì)象蜘腌。如果圖像未被成功創(chuàng)建沫屡，可能會(huì)獲得null值。 -
type和quality：和toDataURL()的參數(shù)一致
和toDataURL()方法相比撮珠，toBlob()方法是異步的沮脖，因此多了個(gè)callback參數(shù)。異步意味著不可控性芯急，那么如果我們需要的上傳格式是Blob勺届，可以通過(guò)先轉(zhuǎn)成dataURL，再把dataURL轉(zhuǎn)成Blob的處理方式娶耍。
現(xiàn)在來(lái)看看具體代碼怎么實(shí)現(xiàn)“圖片→canvas壓縮→圖片”這個(gè)過(guò)程：
簡(jiǎn)單整理下思路：
- 首先拿到圖片資源免姿，用 FileReader 去讀取，讀的過(guò)程中用
readAsDataURL方法把 File 轉(zhuǎn)成dataURL（base64編碼字符串） - 讀取成功觸發(fā) reader 的 load 事件榕酒，此時(shí)把
dataURL賦值給創(chuàng)建的空new Image()的src - image 開(kāi)始加載胚膊，觸發(fā) image 的 onload 事件故俐，在此處進(jìn)行壓縮，再將壓縮完的值返回過(guò)來(lái)紊婉。
- 具體壓縮過(guò)程是用 canvas 在虛擬 DOM 中經(jīng)過(guò)算法按比例繪制圖片药版，然后
將繪制完的 canvas 轉(zhuǎn)成 dataURL，再把 dataURL 轉(zhuǎn)成 Blob - 接著把 Blob append 到 FormData 實(shí)例對(duì)象上（如有需要喻犁，可以在拿到到壓縮完的Blob 結(jié)果后槽片，再將其轉(zhuǎn)換為 File）
下面把具體代碼貼一下（省略無(wú)關(guān)部分）：
??
封裝的壓縮方法js：
// `src/utils/compress.js`
export function dataURLToBlob(dataUrl) {
let arr = dataUrl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bytes = window.atob(arr[1]) // 去掉url的頭，并轉(zhuǎn)換為byte
var n = bytes.length
var u8arr = new Uint8Array(n)
while (n--) { // 將圖像數(shù)據(jù)逐字節(jié)放入U(xiǎn)int8Array中
u8arr[n] = bytes.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
export const compress = (img, option, Orientation) => {
const options = option || {}
const { width, height, quality } = options
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
let initSize = img.src.length
let w = width || img.width
let h = height || img.height
// 如果圖片大于四百萬(wàn)像素肢础，計(jì)算壓縮比并將大小壓至400萬(wàn)以下
let ratio
if ((ratio = (w * h) / 4000000) > 1) {
ratio = Math.sqrt(ratio)
w /= ratio
h /= ratio
} else {
ratio = 1
}
canvas.width = w
canvas.height = h
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, w, h)
// 瓦片canvas
const tCanvas = document.createElement('canvas')
const tctx = tCanvas.getContext('2d')
let count
if ((count = (w * h) / 1000000) > 1) {
// 如果圖片像素大于100萬(wàn)則使用瓦片繪制
console.log('超過(guò)100W像素')
count = ~~(Math.sqrt(count) + 1) //計(jì)算要分成多少塊瓦片
// 計(jì)算每塊瓦片的寬和高
let nw = ~~(w / count)
let nh = ~~(h / count)
tCanvas.width = nw
tCanvas.height = nh
for (let i = 0; i < count; i++) {
for (let j = 0; j < count; j++) {
tctx.drawImage(
img,
i * nw * ratio,
j * nh * ratio,
nw * ratio,
nh * ratio,
0,
0,
nw,
nh
)
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
}
}
} else {
ctx.drawImage(img, 0, 0, w, h)
}
//修復(fù) ios上傳圖片的時(shí)候 被旋轉(zhuǎn)的問(wèn)題
if (Orientation != '' && Orientation != 1) {
switch (Orientation) {
case 6: //需要順時(shí)針（向左）90度旋轉(zhuǎn)
rotateImg(img, 'left', canvas)
break
case 8: //需要逆時(shí)針（向右）90度旋轉(zhuǎn)
rotateImg(img, 'right', canvas)
break
case 3: //需要180度旋轉(zhuǎn)
rotateImg(img, 'right', canvas) //轉(zhuǎn)兩次
rotateImg(img, 'right', canvas)
}
}
// 進(jìn)行最小壓縮
// canvas.toDataURL(type, encoderOptions);
// type： 圖片格式 image/png
// encoderOptions：在指定圖片格式為 image/jpeg 或 image/webp的情況下还栓，可以在 0 到 1 的區(qū)間選擇圖片的質(zhì)量。
// 如果超出取值范圍传轰，將會(huì)使用默認(rèn)值 0.92剩盒。
let newImg = canvas.toDataURL('image/jpeg', quality || 0.3)
console.log('壓縮前：' + initSize)
console.log('壓縮后：' + newImg.length)
console.log('ndata:' + newImg)
console.log(
'壓縮率：' + ~~((100 * (initSize - newImg.length)) / initSize) + '%'
)
// return new File([blob], file.name, { type: file.mime }) // 如果是返回 File
// 默認(rèn)返回 Blob 格式，兼容性較好
// newImg = base64UrlToBlob(newImg)
newImg = dataURLToBlob(newImg)
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
return newImg
}
/** 圖片壓縮路召，默認(rèn)為同比例壓縮
* @param {file} 接受文件數(shù)組或單個(gè)文件(圖片對(duì)象)
* @param {option} 指定壓縮的配置參數(shù)勃刨， width｜ height｜ quality
* 回調(diào)函數(shù) callback 參數(shù)為 base64 字符串圖片數(shù)據(jù)數(shù)組
*/
export function compressFile(file, option, callback) {
const reader = new FileReader()
const image = new Image()
// 異步讀取傳入的 Blob 或 File 對(duì)象波材，【讀取成功】會(huì)觸發(fā) reader 的 load 事件
reader.readAsDataURL(file)
// 讀取到圖片數(shù)據(jù)保存在 event.target 的 result屬性中
reader.onload = function (event) {
// 數(shù)據(jù)格式是 data:URL字符串（base64編碼）
image.src = event.target.result
}
return new Promise((resolve, reject) => {
image.onload = () => {
resolve(compress(image, option))
}
})
}
批量上傳組件：
<!--批量上傳組件-->
<template>
<el-upload
:action="`${apiUrl}/admin/upload`"
name="photoSrc"
with-credentials
:show-file-list="true"
:file-list="photoList"
:on-change="photoListChange"
:on-preview="handlePreview"
:on-remove="handleRemove"
:auto-upload="false"
:drag="drag"
multiple
:class="uploadClass"
>
<template v-if="!drag" #trigger>
<el-button size="small" type="primary">選取文件</el-button>
</template>
<template v-if="drag">
<i class="el-icon-upload" />
<div class="el-upload__text">
將圖片拖到此處股淡，<br />或<em>點(diǎn)擊上傳</em>
</div>
</template>
</el-upload>
</template>
<script lang="ts">
import { compressFile } from '@/utils/compress'
export default defineComponent({
name: 'UploadMulti',
setup(props) {
const photoList = ref([])
// 當(dāng)文件列表有改變時(shí)觸發(fā)，添加文件廷区、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用唯灵。
// 我們配置了手動(dòng)上傳，因此只有添加圖片時(shí)觸發(fā)
const photoListChange = (file: Object) => {
const typeList = ['image/jpeg', 'image/png', 'image/gif']
const isTypeValid = typeList.includes(file.raw.type)
const isLt2M = file.size / 1024 / 1024 < 2
if (!isTypeValid) return ElMessage.error('圖片格式只能是 JPG/PNG/GIF!')
if (!isLt2M) return ElMessage.error('圖片大小不能超過(guò) 2MB!')
// 壓縮處理
compressFile(file.raw).then(res => {
const newFile = new File([res], file.name, { type: file.raw.type })
file.blobUrl = res
file.raw = Object.assign({}, newFile)
photoList.value.push(file)
})
// photoList.value.push(file)
}
// 傳入 true 獲取【已上傳】文件隙轻，否則是獲取【未上傳】文件
// 用是否擁有 raw 屬性 來(lái)判斷埠帕，有 raw property 就是待上傳的
const filterPhotoList = (isUploaded?: Boolean) => {
return isUploaded
? photoList.value.filter(
item => !Object.prototype.hasOwnProperty.call(item, 'raw')
)
: photoList.value.filter(item =>
Object.prototype.hasOwnProperty.call(item, 'raw')
)
}
// 表單提交時(shí)先觸發(fā)這個(gè)方法用來(lái)獲取文件列表，如有未上傳的就在這時(shí)上傳
const getUploadedList = async () => {
// 獲取待上傳的文件列表玖绿，如果沒(méi)有就直接返回 photoList 的值
const toUploadList = filterPhotoList()
if (toUploadList.length === 0) return photoList.value
// 有則開(kāi)始手動(dòng)上傳
const formData = new FormData()
// 壓縮處理也可以考慮放這里
// for (let file of toUploadList) {
// const res = await compressFile(file)
// ...
// formData.append('photoSrc', file.blobUrl, file.name)
// }
toUploadList.forEach(file => {
// 如果是 Blob
formData.append('photoSrc', file.blobUrl, file.name)
// formData.append('photoSrc', file.raw, file.name)
})
// 執(zhí)行上傳敛瓷，uploadMulti 是我的批量上傳接口
const { data } = await uploadMulti(formData)
// 對(duì)返回的圖片信息做些處理，再給表單去繼續(xù) Post
return filterPhotoList(true).concat(uploadMultiSuccess(data))
}
return {
photoList,
photoListChange,
filterPhotoList,
getUploadedList,
}
}
})
</script>
參考：
前端JS利用canvas的drawImage()對(duì)圖片進(jìn)行壓縮
vue下實(shí)現(xiàn)input實(shí)現(xiàn)圖片上傳斑匪，壓縮呐籽，拼接以及旋轉(zhuǎn)
