【目錄】
- 問題來源
- 思路分析
- 前提的函數(shù)
- 將file文件轉(zhuǎn)化為base64
- 將base64轉(zhuǎn)化為文件流
- 壓縮方法
- 方法使用
- 問題總結(jié)
- 圖片壓縮程度
- 本來想做一個(gè)壓縮圖片的遞歸恬口，直到圖片大小符合期望
- ios拍攝方向問題
問題來源
這個(gè)問題，源于上傳圖片文件的時(shí)候胜卤，后臺(tái)限制了2MB的大小，but在調(diào)起相機(jī)拍照的時(shí)候分分鐘超過了2MB,為了不影響用戶體驗(yàn)和功能需求凳怨，需要前端對(duì)大小進(jìn)行壓縮瑰艘，然后傳到后臺(tái)。
思路分析
找了很多資料肤舞，發(fā)現(xiàn)只有canvas可以對(duì)圖片進(jìn)行壓縮處理紫新。
原理大概就是：
1、先將圖片的file文件轉(zhuǎn)成baseURL
2李剖、創(chuàng)建一個(gè)image標(biāo)簽去接收文件獲取圖片的寬高和比例芒率。
3、創(chuàng)建canvas畫布設(shè)置畫布的大小篙顺。
4偶芍、將圖片繪制到canvas上面。
5德玫、對(duì)canvas進(jìn)行壓縮處理匪蟀，獲得新的baseURL
6、將baseURL轉(zhuǎn)化回文件宰僧。
前提的函數(shù)
將file文件轉(zhuǎn)化為base64
/**
* @param {二進(jìn)制文件流} file
* @param {回調(diào)函數(shù)材彪，返回base64} fn
*/
function changeFileToBaseURL(file,fn){
// 創(chuàng)建讀取文件對(duì)象
var fileReader = new FileReader();
//如果file沒定義返回null
if(file == undefined) return fn(null);
// 讀取file文件,得到的結(jié)果為base64位
fileReader.readAsDataURL(file);
fileReader.onload = function(){
// 把讀取到的base64
var imgBase64Data = this.result;
fn(imgBase64Data);
}
}
將base64轉(zhuǎn)化為文件流
/**
* 將base64轉(zhuǎn)換為文件
* @param {baseURL} dataurl
* @param {文件名稱} filename
* @return {文件二進(jìn)制流}
*/
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
壓縮方法
/**
* canvas壓縮圖片
* @param {參數(shù)obj} param
* @param {文件二進(jìn)制流} param.file 必傳
* @param {目標(biāo)壓縮大小} param.targetSize 不傳初始賦值-1
* @param {輸出圖片寬度} param.width 不傳初始賦值-1，等比縮放不用傳高度
* @param {輸出圖片名稱} param.fileName 不傳初始賦值image
* @param {壓縮圖片程度} param.quality 不傳初始賦值0.92琴儿。值范圍0~1
* @param {回調(diào)函數(shù)} param.succ 必傳
*/
function pressImg(param){
//如果沒有回調(diào)函數(shù)就不執(zhí)行
if(param && param.succ){
//如果file沒定義返回null
if(param.file == undefined) return param.succ(null);
//給參數(shù)附初始值
param.targetSize = param.hasOwnProperty("targetSize") ? param.targetSize : -1;
param.width = param.hasOwnProperty("width") ? param.width : -1;
param.fileName = param.hasOwnProperty("fileName") ? param.fileName: "image";
param.quality = param.hasOwnProperty("quality") ? param.quality : 0.92;
var _this = this;
// 得到文件類型
var fileType = param.file.type;
// console.log(fileType) //image/jpeg
if(fileType.indexOf("image") == -1){
console.log('請(qǐng)選擇圖片文件^_^');
return param.succ(null);
}
//如果當(dāng)前size比目標(biāo)size小段化，直接輸出
var size = param.file.size;
if(param.targetSize > size){
return param.succ(param.file);
}
// 讀取file文件,得到的結(jié)果為base64位
changeFileToBaseURL(param.file,function(base64){
if(base64){
var image = new Image();
image.src = base64;
image.onload = function(){
// 獲得長寬比例
var scale = this.width / this.height;
// console.log(scale);
//創(chuàng)建一個(gè)canvas
var canvas = document.createElement('canvas');
//獲取上下文
var context = canvas.getContext('2d');
//獲取壓縮后的圖片寬度,如果width為-1，默認(rèn)原圖寬度
canvas.width = param.width == -1 ? this.width : param.width;
//獲取壓縮后的圖片高度,如果width為-1造成，默認(rèn)原圖高度
canvas.height = param.width == -1 ? this.height : parseInt(param.width / scale);
//把圖片繪制到canvas上面
context.drawImage(image, 0, 0, canvas.width, canvas.height);
//壓縮圖片显熏，獲取到新的base64Url
var newImageData = canvas.toDataURL(fileType,param.quality);
//將base64轉(zhuǎn)化成文件流
var resultFile = dataURLtoFile(newImageData,param.fileName);
//判斷如果targetSize有限制且壓縮后的圖片大小比目標(biāo)大小大，就彈出錯(cuò)誤
if(param.targetSize != -1 && param.targetSize < resultFile.size){
console.log("圖片上傳尺寸太大晒屎，請(qǐng)重新上傳^_^");
param.succ(null);
}else{
//返回文件流
param.succ(resultFile);
}
}
}
});
}
}
方法使用
文件的size是按照字節(jié)喘蟆，所以我們需要把要求的大小轉(zhuǎn)化成字節(jié)。
1字節(jié)就是1byte就是1B鼓鲁，1KB = 1024B蕴轨，1MB = 1024 * 1024B
<input type="file" id="fileImg" class="fileImg"/>
// 圖片文件上傳獲取url
$("#fileImg").on('change',function(){
pressImg({
file:this.files[0],
targetSize:2 * 1024 * 1024,
quality:0.5,
width:600,
succ:function(resultFile){
//如果不是null就是壓縮成功
if(resultFile){
//TODO
}
}
})
});
問題總結(jié)
圖片壓縮程度
圖片的壓縮程度不太好確定，所以可以進(jìn)行多次嘗試坐桩，根據(jù)需求方的要求進(jìn)行調(diào)整尺棋。
改變目標(biāo)圖片的大小和清晰度都可以改變圖片的壓縮程度。
本來想做一個(gè)壓縮圖片的遞歸，直到圖片大小符合期望
后來發(fā)現(xiàn)
- 如果目標(biāo)大小比較小膘螟，圖片如何進(jìn)行壓縮都不能滿足條件的時(shí)候成福，會(huì)造成循環(huán)無法跳出，浪費(fèi)資源荆残。
- 如果圖片進(jìn)行幾次壓縮之后奴艾，文件大小不會(huì)改變了，有的時(shí)候還會(huì)增加内斯，奇奇怪怪蕴潦。
所以就放棄了遞歸。
ios拍攝方向問題
因?yàn)閕os調(diào)起系統(tǒng)相機(jī)拍照是逆時(shí)針旋轉(zhuǎn)了90度俘闯。
而在我壓縮圖片之后傳到后臺(tái)潭苞，發(fā)現(xiàn)圖片的exif信息的拍攝方向丟失，導(dǎo)致ios上傳的圖片都是逆時(shí)針旋轉(zhuǎn)了90度真朗。這個(gè)問題安卓不曾發(fā)現(xiàn)此疹。
目前有些懷疑，是base64轉(zhuǎn)化成file文件的時(shí)候遮婶，丟失的蝗碎。
之后驗(yàn)證后會(huì)在這里進(jìn)行補(bǔ)充說明。
@version1.0——2019-8-2——?jiǎng)?chuàng)建《使用canvas壓縮圖片大小》
?burning_韻七七
