最近在做移動(dòng)端遇到了一個(gè)問(wèn)題就是：手機(jī)拍照后，圖片過(guò)大如果上傳到服務(wù)器務(wù)必會(huì)浪費(fèi)帶寬，最重要的是流量啊別慌，好事兒來(lái)了，務(wù)必就會(huì)有人去研究研究圖片的壓縮：
目前創(chuàng)新互聯(lián)已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、竹溪網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
鄙人結(jié)合前人的經(jīng)驗(yàn)，結(jié)合自己實(shí)戰(zhàn)，總結(jié)出一個(gè)方法供大家參考:
重慶分公司
重慶分公司
/**
* 圖片壓縮，默認(rèn)同比例壓縮
* @param {Object} path
* pc端傳入的路徑可以為相對(duì)路徑，但是在移動(dòng)端上必須傳入的路徑是照相圖片儲(chǔ)存的絕對(duì)路徑
* @param {Object} obj
* obj 對(duì)象 有 width， height， quality(0-1)
* @param {Object} callback
* 回調(diào)函數(shù)有一個(gè)參數(shù)，base64的字符串?dāng)?shù)據(jù)
*/
function dealImage(path, obj, callback){
var img = new Image();
img.src = path;
img.onload = function(){
var that = this;
// 默認(rèn)按比例壓縮
var w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height || (w / scale);
var quality = 0.7; // 默認(rèn)圖片質(zhì)量為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;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
// 圖像質(zhì)量
if(obj.quality && obj.quality <= 1 && obj.quality > 0){
quality = obj.quality;
}
// quality值越小，所繪制出的圖像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality );
// 回調(diào)函數(shù)返回base64的值
callback(base64);
}
}當(dāng)然返回的是一個(gè)base64的一個(gè)字符串；
如果可以試著測(cè)試一下壓縮后的圖片大小：
// 調(diào)用函數(shù)處理圖片
dealImage("路徑", {
// 注意：在pc端可以用絕對(duì)路徑或相對(duì)路徑，移動(dòng)端最好用絕對(duì)路徑（因?yàn)橛胻ake photo后的圖片路徑，我沒(méi)有試成功（如果有人試成功了可以分享一下經(jīng)驗(yàn)））
width : 200
}, function(base){
//直接將獲取到的base64的字符串，放到一個(gè)image標(biāo)簽中就可看到測(cè)試后的壓縮之后的樣式圖了
document.getElementById("transform").src = base;
console.log("壓縮后：" + base.length / 1024 + " " + base);
})PS：主要思想就是獲取到圖片，利用H5 canvas技術(shù)進(jìn)行圖片數(shù)據(jù)化為 base64 的字符串，最后傳到后臺(tái)進(jìn)行，后臺(tái)將base64的字符串?dāng)?shù)據(jù)進(jìn)行圖像化儲(chǔ)存。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
