您好,登錄后才能下訂單哦!
這篇文章主要講解了“在html5中如何使用canvas來(lái)壓縮圖片”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“在html5中如何使用canvas來(lái)壓縮圖片”吧!
前兩天做了一個(gè)圖片轉(zhuǎn)base64上傳的功能,發(fā)現(xiàn)如果圖片的base64過(guò)大的話,請(qǐng)求會(huì)變的很慢,嚴(yán)重的直接超時(shí)了,所以想到了在上傳前壓縮一下圖片,然后再上傳到后臺(tái),這樣可以大大的提高效率,在這里記錄一下利用 canvas 壓縮圖片遇到的幾個(gè)坑。完整代碼會(huì)在文末給出。
第一個(gè)坑,在壓縮圖片的時(shí)候沒(méi)獲取圖片本身的寬高,給了一個(gè) 600*480 的定寬定高,因?yàn)槭鞘謾C(jī)端的,在上傳圖片的時(shí)候都是幾兆的圖片,所以這塊沒(méi)任何問(wèn)題。出問(wèn)題的地方在 修改頭像的時(shí)候,測(cè)試的時(shí)候上傳的圖片都是小圖片,然后就出現(xiàn)了 壓縮后的圖片顯示不完全,大部分都是空白的現(xiàn)象,這就是因?yàn)樵趬嚎s的時(shí)候沒(méi)有考慮圖片原本的寬高的情況。
第二個(gè)坑,解決第一個(gè)坑的辦法就是在圖片加載完成后(onload),獲取圖片本身的寬高,然后賦值給 canvas ,這樣進(jìn)行操作,但是這有個(gè)坑就是,圖片加載是異步的,在你 return
的時(shí)候,返回的可能是 undefined 而不是你需要的 壓縮后的 base64。這里的解決方法是,新建一個(gè) Promise ,然后把結(jié)果 resolve()
返回去,在調(diào)用的時(shí)候 .then()
得到結(jié)果。
知識(shí)點(diǎn):
canvas 的 toDataURL('image/png', 0.9) ;
把 canvas 畫(huà)的圖片轉(zhuǎn)換為 base64,第一個(gè)參數(shù)表示的是圖片的類型,第二個(gè)參數(shù)表示的是圖片的清晰度。
規(guī)定一個(gè)最大尺寸,如果圖片本身的寬高大于這個(gè)尺寸,按照最大的一個(gè)邊進(jìn)行縮放,另一個(gè)根據(jù)圖片的 比例 進(jìn)行設(shè)置,然后設(shè)置給 canvas .
miniImage.js:
export default async function miniSize(imgData, maxSize = 200*1024){
// const maxSize = 200 * 1024;
if(imgData && imgData.files && imgData.files.size < maxSize) {
return imgData.url;
}else{
console.log('----------------壓縮圖片-------------------');
const canvas = document.createElement('canvas');
let img = new Image();
img.src = imgData.url;
let ctx = canvas.getContext('2d');
return new Promise((resolve =>{
img.addEventListener('load', function(){
//圖片原始尺寸
let originWidth = this.width;
let originHeight = this.height;
// 最大尺寸限制
let maxWidth = 400, maxHeight = 400;
// 目標(biāo)尺寸
let targetWidth = originWidth, targetHeight = originHeight;
// 圖片尺寸超過(guò)400x400的限制
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.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
let base64 = canvas.toDataURL('image/png', 0.9);
resolve(base64);
}, false);
}))
}
}
調(diào)用:
test.js:
onChangeImg = async (files, type, index) => {
let previous = this.props.imagePicker.files;
if(type === "add") {
let result = miniSize(files[files.length-1]);
//使用 .then() 調(diào)用獲得結(jié)果
await result.then(res => {
previous.push({url: res});
});
}else if(type === "remove") {
previous.splice(index,1);
}
await this.props.dispatch({
type: 'imagePicker/saveImage',
payload: {
files: previous
}
})
}
感謝各位的閱讀,以上就是“在html5中如何使用canvas來(lái)壓縮圖片”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)在html5中如何使用canvas來(lái)壓縮圖片這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。