溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
最近在做移動端遇到了一個問題就是：手機拍照后，圖片過大如果上傳到服務器務必會浪費帶寬，最重要的是流量啊別慌，好事兒來了，務必就會有人去研究研究圖片的壓縮：
鄙人結合前人的經驗，結合自己實戰，總結出一個方法供大家參考:
/**
* 圖片壓縮，默認同比例壓縮
* @param {Object} path
* pc端傳入的路徑可以為相對路徑，但是在移動端上必須傳入的路徑是照相圖片儲存的絕對路徑
* @param {Object} obj
* obj 對象 有 width， height， quality(0-1)
* @param {Object} callback
* 回調函數有一個參數，base64的字符串數據
*/
function dealImage(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默認按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默認圖片質量為0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 創建屬性節點
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 圖像質量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所繪制出的圖像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality );
// 回調函數返回base64的值
callback(base64);
}
}
當然返回的是一個base64的一個字符串；
如果可以試著測試一下壓縮后的圖片大小：
// 調用函數處理圖片
dealImage("路徑", {
// 注意：在pc端可以用絕對路徑或相對路徑，移動端最好用絕對路徑（因為用take photo后的圖片路徑，我沒有試成功（如果有人試成功了可以分享一下經驗））
width : 200
}, function(base){
//直接將獲取到的base64的字符串，放到一個image標簽中就可看到測試后的壓縮之后的樣式圖了
document.getElementById("transform").src = base;
console.log("壓縮后：" + base.length / 1024 + " " + base);
})
PS：主要思想就是獲取到圖片，利用H5 canvas技術進行圖片數據化為 base64 的字符串，最后傳到后臺進行，后臺將base64的字符串數據進行圖像化儲存。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
