溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文作者：Marydon
原文鏈接：https://www.cnblogs.com/Marydon20170307/p/11486511.html
1.情景展示
如上圖所示，點擊上傳圖片按鈕，調用手機攝像頭拍照功能。
<input onchange="javascript:imgFun.uploadPicture();" type="file" name="file" id="file" accept="image/*" capture="camera" >
我們知道現在，手機拍照在10MB左右，體積太大，在上傳到服務器前，能不能只縮小圖片的體積，而不改變圖片尺寸？
2.原因分析
通過canvas實現對圖片的重新繪制。
代碼展示：
/**
* 圖片壓縮
* @explain 借助canvas對圖片進行重繪（canvas2DataURL）
* @param base64Url base64格式的圖片字符串
* @param imgAttr 重繪圖片寬度、高度、質量等屬性的設置
* @param callback 該函數執行完畢后，要執行的回調函數
* @returns
*/
function photoCompress (base64Url, imgAttr, callback){
var img = new Image();
img.src = base64Url;
img.onload = function(){
var that = this;
// 默認按比例壓縮
var w = that.width,
h = that.height,
// 寬高比例
scale = w / h;
w = imgAttr.width || w;
h = imgAttr.height || (w / scale);
// 默認圖片質量為0.7
var quality = 0.7;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創建屬性節點
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);
// 圖像質量（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);
// 回調函數返回base64的值
callback(base64);
};
}
可自定義設置圖片質量，圖片的寬高（通過imgAttr設置）。
3.完整示例
// js 獲取文件對象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
alert("圖像上傳失敗，請重試！");
}
// 文件讀取對象
var reader = new FileReader();
// 圖片轉base64（Blob對象或File對象）
reader.readAsDataURL(fileObj);
// 圖片大小<=1MB，size的單位：B（1Mb=1B*1024*1024）
if(fileObj.size/1024 <= 1024) {
reader.onload = function(e) {
// 獲取對應的base64
var imgBase64 = e.target.result;
// 將圖片的base64碼傳給后臺
// 調用騰訊接口
$.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
// TODO 對返回的接口數據進行自動填充處理
});
};
} else {
// 讀取完畢
reader.onload = function(){
// 圖片轉換成為base64Url
var fileBase64 = this.result;
// 圖片參數
var imgAttr = {quality : 0.2, type : 'img/jpeg'};
// 回調函數
var callBack = function (base64Codes) {
// 圖片比較
// 調用騰訊接口
};
// 壓縮圖片
photoCompress(fileBase64,imgAttr,callBack);
};
}
說明：
前端對圖片進行重繪，對瀏覽器有一定的要求，我測試的時候在電腦端沒有問題，但是，在微信上使用時，就會很難受了，會將微信的qq瀏覽器內核搞垮，根本無法使用。
不得以，放棄了在前端進行壓縮的想法，轉而直接將圖片以流的形式提交至后臺，由java負責圖片壓縮處理。
補充：
圖片優化方面可以考慮從以下幾個方面著手：減小分辨率 >壓縮圖片>chrome使用webp格式
寫在最后
哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！
以上就是js 壓縮圖片的示例（只縮小體積，不更改圖片尺寸）的詳細內容，更多關于js 壓縮圖片的資料請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
