您好,登錄后才能下訂單哦!
本篇文章為大家展示了使用canvas怎么對圖片進(jìn)行壓縮,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
前提的函數(shù)
將file文件轉(zhuǎn)化為base64
/** * @param {二進(jìn)制文件流} file * @param {回調(diào)函數(shù),返回base64} fn */ function changeFileToBaseURL(file,fn){ // 創(chuàng)建讀取文件對象 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('請選擇圖片文件^_^'); 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)建一個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)大小大,就彈出錯誤 if(param.targetSize != -1 && param.targetSize < resultFile.size){ console.log("圖片上傳尺寸太大,請重新上傳^_^"); 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)圖片的大小和清晰度都可以改變圖片的壓縮程度。
本來想做一個壓縮圖片的遞歸,直到圖片大小符合期望
后來發(fā)現(xiàn)
如果目標(biāo)大小比較小,圖片如何進(jìn)行壓縮都不能滿足條件的時候,會造成循環(huán)無法跳出,浪費(fèi)資源。
如果圖片進(jìn)行幾次壓縮之后,文件大小不會改變了,有的時候還會增加,奇奇怪怪。 所以就放棄了遞歸。
ios拍攝方向問題
因為ios調(diào)起系統(tǒng)相機(jī)拍照是逆時針旋轉(zhuǎn)了90度。 而在我壓縮圖片之后傳到后臺,發(fā)現(xiàn)圖片的exif信息的拍攝方向丟失,導(dǎo)致ios上傳的圖片都是逆時針旋轉(zhuǎn)了90度。這個問題安卓不曾發(fā)現(xiàn)。
上述內(nèi)容就是使用canvas怎么對圖片進(jìn)行壓縮,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。