您好,登錄后才能下訂單哦!
本文作者:Marydon
原文鏈接:https://www.cnblogs.com/Marydon20170307/p/11486511.html
1.情景展示
如上圖所示,點(diǎn)擊上傳圖片按鈕,調(diào)用手機(jī)攝像頭拍照功能。
<input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" >
我們知道現(xiàn)在,手機(jī)拍照在10MB左右,體積太大,在上傳到服務(wù)器前,能不能只縮小圖片的體積,而不改變圖片尺寸?
2.原因分析
通過(guò)canvas實(shí)現(xiàn)對(duì)圖片的重新繪制。
代碼展示:
/** * 圖片壓縮 * @explain 借助canvas對(duì)圖片進(jìn)行重繪(canvas2DataURL) * @param base64Url base64格式的圖片字符串 * @param imgAttr 重繪圖片寬度、高度、質(zhì)量等屬性的設(shè)置 * @param callback 該函數(shù)執(zhí)行完畢后,要執(zhí)行的回調(diào)函數(shù) * @returns */ function photoCompress (base64Url, imgAttr, callback){ var img = new Image(); img.src = base64Url; img.onload = function(){ var that = this; // 默認(rèn)按比例壓縮 var w = that.width, h = that.height, // 寬高比例 scale = w / h; w = imgAttr.width || w; h = imgAttr.height || (w / scale); // 默認(rèn)圖片質(zhì)量為0.7 var quality = 0.7; //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 創(chuàng)建屬性節(jié)點(diǎn) var anw = document.createAttribute("width"); anw.nodeValue = w; canvas.setAttributeNode(anw); var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 圖像質(zhì)量(0-1) if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){ quality = imgAttr.quality; } // 重繪后的圖片類型 var imgType = imgAttr.type || 'image/jpeg'; // quality值越小,所繪制出的圖像越模糊 var base64 = canvas.toDataURL(imgType, quality); // 回調(diào)函數(shù)返回base64的值 callback(base64); }; }
可自定義設(shè)置圖片質(zhì)量,圖片的寬高(通過(guò)imgAttr設(shè)置)?! ?/p>
3.完整示例
// js 獲取文件對(duì)象 var fileObj = document.getElementById("file").files[0]; if (null == fileObj) { alert("圖像上傳失敗,請(qǐng)重試!"); } // 文件讀取對(duì)象 var reader = new FileReader(); // 圖片轉(zhuǎn)base64(Blob對(duì)象或File對(duì)象) reader.readAsDataURL(fileObj); // 圖片大小<=1MB,size的單位:B(1Mb=1B*1024*1024) if(fileObj.size/1024 <= 1024) { reader.onload = function(e) { // 獲取對(duì)應(yīng)的base64 var imgBase64 = e.target.result; // 將圖片的base64碼傳給后臺(tái) // 調(diào)用騰訊接口 $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){ // TODO 對(duì)返回的接口數(shù)據(jù)進(jìn)行自動(dòng)填充處理 }); }; } else { // 讀取完畢 reader.onload = function(){ // 圖片轉(zhuǎn)換成為base64Url var fileBase64 = this.result; // 圖片參數(shù) var imgAttr = {quality : 0.2, type : 'img/jpeg'}; // 回調(diào)函數(shù) var callBack = function (base64Codes) { // 圖片比較 // 調(diào)用騰訊接口 }; // 壓縮圖片 photoCompress(fileBase64,imgAttr,callBack); }; }
說(shuō)明:
前端對(duì)圖片進(jìn)行重繪,對(duì)瀏覽器有一定的要求,我測(cè)試的時(shí)候在電腦端沒(méi)有問(wèn)題,但是,在微信上使用時(shí),就會(huì)很難受了,會(huì)將微信的qq瀏覽器內(nèi)核搞垮,根本無(wú)法使用。
不得以,放棄了在前端進(jìn)行壓縮的想法,轉(zhuǎn)而直接將圖片以流的形式提交至后臺(tái),由java負(fù)責(zé)圖片壓縮處理。
補(bǔ)充:
圖片優(yōu)化方面可以考慮從以下幾個(gè)方面著手:減小分辨率 >壓縮圖片>chrome使用webp格式
寫(xiě)在最后
哪位大佬如若發(fā)現(xiàn)文章存在紕漏之處或需要補(bǔ)充更多內(nèi)容,歡迎留言?。?!
以上就是js 壓縮圖片的示例(只縮小體積,不更改圖片尺寸)的詳細(xì)內(nèi)容,更多關(guān)于js 壓縮圖片的資料請(qǐng)關(guā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)容。