JS圖片壓縮實作方法
- 小云云原創
- 2018-01-19 10:58:581856瀏覽
本文主要介紹了JS中圖片壓縮的方法，包括等比壓縮圖片的方法,需要的朋友可以參考下，希望能幫助到大家。
先想想我們有哪些需求？大多時候我們需要將一個File物件壓縮之後再變成File物件傳入到遠端圖片伺服器；有時候我們也需要將一個base64字串壓縮之後再變成base64字串傳入到遠端資料庫；有時它還有可能是一塊canvas畫布，或是一個Image對象，或是直接就是一個圖片的url位址，我們需要將它們壓縮上傳到遠端；面對這麼多的需求，王二索性畫了一張圖：
Alt text
二、解決辦法
#如上圖所示，王二一共寫了七個方法，基本上覆寫了JS中大部分檔案類型的轉換與壓縮，其中：
1、 urltoImage(url,fn) 會透過一個url載入所需的圖片對象，其中url 參數傳入圖片的url , fn 為回呼方法,包含一個Image物件的參數，程式碼如下：
function urltoImage (url,fn){
var img = new Image();
img.src = url;
img.onload = function(){
fn(img);
}
};
2、 imagetoCanvas(image) 會將一個Image 物件轉變為一個Canvas 類型對象，其中image 參數傳入一個Image對象，程式碼如下：
function imagetoCanvas(image){
var cvs = document.createElement("canvas");
var ctx = cvs.getContext('2d');
cvs.width = image.width;
cvs.height = image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
return cvs ;
};
3、 canvasResizetoFile(canvas,quality,fn) 會將一個Canvas 物件壓縮轉變為一個Blob 類型物件；其中canvas 參數傳入一個Canvas 物件; quality 參數傳入一個0-1的number 類型，表示圖片壓縮品質; fn 為回呼方法，包含一個Blob 物件的參數;程式碼如下：
function canvasResizetoFile(canvas,quality,fn){
canvas.toBlob(function(blob) {
fn(blob);
},'image/jpeg',quality);
};
這裡的Blob 物件表示不可變的類似檔案物件的原始資料。 Blob 表示不一定是 JavaScript 原生形式的資料。 File 介面基於 Blob ，繼承了 Blob 的功能並將其擴展使其支援使用者係統上的檔案。我們可以把它當做File類型對待，其他更具體的用法可以參考MDN文檔
4、 canvasResizetoDataURL(canvas,quality) 會將一個Canvas 物件壓縮轉變為一個dataURL 字串,其中canvas 參數傳入一個Canvas 物件; quality 參數傳入一個0-1的number 類型，表示圖片壓縮品質;程式碼如下：
methods.canvasResizetoDataURL = function(canvas,quality){
return canvas.toDataURL('image/jpeg',quality);
};
其中的toDataURL API可以參考MDN文件
#5、filetoDataURL(file ,fn) 會將File （ Blob ）型別檔轉變為dataURL 字串,其中file 參數傳入一個File （ Blob ）型別檔; fn 為回呼方法，包含一個dataURL 字串的參數;程式碼如下：
function filetoDataURL(file,fn){
var reader = new FileReader();
reader.onloadend = function(e){
fn(e.target.result);
};
reader.readAsDataURL(file);
}; 6、 dataURLtoImage(dataurl,fn) 會將一串dataURL 字串轉變為Image 類型檔案,其中dataurl 參數傳入一個dataURL 字串, fn 為回呼方法，包含一個Image 類型檔案的參數，程式碼如下：
function dataURLtoImage(dataurl,fn){
var img = new Image();
img.onload = function() {
fn(img);
};
img.src = dataurl;
};
7、 dataURLtoFile(dataurl) 會將一串dataURL 字串轉變為Blob 類型對象，其中dataurl 參數傳入一個dataURL 字串,程式碼如下：
function dataURLtoFile(dataurl) {
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 Blob([u8arr], {type:mime});
};
三、進一步封裝
對於常用的將一個File 物件壓縮之後再變成File 物件,我們可以將上面的方法再封裝一下，參考如下程式碼：
function fileResizetoFile(file,quality,fn){
filetoDataURL (file,function(dataurl){
dataURLtoImage(dataurl,function(image){
canvasResizetoFile(imagetoCanvas(image),quality,fn);
})
})
}
其中， file 參數傳入一個File （ Blob ） 類型檔案；quality 參數傳入 0-1 的number 類型，表示圖片壓縮品質；fn 為回呼方法，包含一個Blob 類型檔案的參數。
它使用起來就像下面這樣：
var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
console.log(res);
//拿到res，做出你要上传的操作；
})
這樣的話，圖片壓縮上傳就能輕鬆地搞定了，以上的8個方法我已經封裝好放到github 上了，喜歡的話可以使勁的star哈。
參考文件：
MDN
ps：下面看下JS等比壓縮圖片的方法
function proDownImage(path,imgObj) { // 等比压缩图片工具
//var proMaxHeight = 185;
var proMaxHeight=300;
var proMaxWidth = 175;
var size = new Object();
var image = new Image();
image.src = path;
image.attachEvent("onreadystatechange",
function() { // 当加载状态改变时执行此方法,因为img的加载有延迟
if (image.readyState == "complete") { // 当加载状态为完全结束时进入
if (image.width > 0 && image.height > 0) {
var ww = proMaxWidth / image.width;
var hh = proMaxHeight / image.height;
var rate = (ww < hh) ? ww: hh;
if (rate <= 1) {
alert("imgage width*rate is:" + image.width * rate);
size.width = image.width * rate;
size.height = image.height * rate;
} else {
alert("imgage width is:" + image.width);
size.width = image.width;
size.height = image.height;
}
}
}
imgObj.attr("width",size.width);
imgObj.attr("height",size.height);
});
}
相關推薦：
以上是JS圖片壓縮實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！