今天咱們要講解下如何編寫一個圖片壓縮、方向糾正插件,附帶着會講解下如何上傳和預覽。
html
爲何重點放在圖片壓縮和方向糾正?
前端
相信你們在作項目過程當中,常常會遇到上傳圖片到後端,可是因爲圖片過大,須要對圖片壓縮處理。特別在移動端,手機拍的照片廣泛過於大了,咱們有時候只是須要上傳一張頭像,很小就夠用了。還有在部分手機上(已知蘋果手機)拍的照片存在方向角度問題,這時就須要咱們來糾正圖片角度了。
vue
不少同窗多數時候是在用別人寫好的圖片壓縮上傳插件。針對咱們的需求,這些插件有時候不能達到咱們最理想的效果,本身寫呢,又不會寫,非常頭疼。今天就深刻剖析講解下,教會你們編寫本身的圖片壓縮、方向糾正插件,以及預覽和上傳壓縮後圖片數據。react
文中用到的一些H5的api和EXIF.js等知識點若是不懂的話,請先閱讀文末尾的結語中的知識點資料。git
壓縮圖片而且上傳主要用到filereader、canvas 以及 formdata 這三個h5的api和插件EXIF.js。邏輯並不難。整個過程就是:github
(1)用戶使用input file上傳圖片的時候,用filereader讀取用戶上傳的圖片數據(base64格式)ajax
(2)把圖片數據傳入img對象,而後將img繪製到canvas上,用EXIF.js對圖片方向進行糾正,再調用canvas.toDataURL對圖片進行壓縮,獲取到壓縮後的base64格式圖片數據,轉成二進制canvas
(3)獲取到壓縮後的圖片二進制數據,預覽。後端
(4)將壓縮後的圖片二進制數據塞入formdata,再經過XmlHttpRequest提交formdataapi
如此四步,就完成了圖片的壓縮、方向糾正、預覽和上傳。
考慮到在實際項目中,可能用不一樣的開發框架(vue.js/JQ/react.js/angular.js/anu.js等),圖片預覽的UI樣式也可能不一樣,圖片數據上傳方法可能不一樣。由於圖片壓縮和方向糾正這兩塊的邏輯多變性比較低,咱們這裏把圖片壓縮和方向糾正抽離出來,封裝爲一個插件庫。
先是獲取圖片數據,也就是監聽input file的change事件,而後獲取到用來壓縮上傳的文件對象files,將files傳到【圖片壓縮、方向糾正插件】中進行處理。
這時候根據每一個人的需求,也能夠預覽未壓縮的圖片。
//監聽上傳組件input的onchange事件,壓縮圖片,糾正圖片方向,同時獲取壓縮後的圖片
filechooser.onchange = function () {
var fileList = this.files;
//預覽壓縮前的圖片
var files = Array.prototype.slice.call(fileList);
files.forEach(function (file, i) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("li")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.img_list').appendChild(li)
}
reader.readAsDataURL(file);
});
//處理圖片列表,getCompressiveFileList接受處理後的圖片數據列表
//下面兩行代碼爲圖片壓縮、方向糾正插件的用法,具體實現細節請繼續往下閱讀 ~_~ ↓↓↓
var process = window.lzImgProcess();
process(fileList, getCompressiveFileList);
}
複製代碼
上面作完圖片數據的獲取後,就能夠作process壓縮圖片的方法了。而壓縮圖片也並非直接把圖片繪製到canvas再調用一下toDataURL就行的。
在IOS中,canvas繪製圖片是有兩個限制的:
首先是圖片的大小,若是圖片的大小超過兩百萬像素,圖片也是沒法繪製到canvas上的,調用drawImage的時候不會報錯,可是你用toDataURL獲取圖片數據的時候獲取到的是空的圖片數據。
再者就是canvas的大小有限制,若是canvas的大小大於大概五百萬像素(即寬高乘積)的時候,不只圖片畫不出來,其餘什麼東西也都是畫不出來的。
應對上面兩種限制,我把圖片寬度、高度壓縮控制在1000px之內,這樣圖片最大就不超過兩百萬像素了。在前端開發中,1000px*1000px基本能夠知足絕大部分的需求了。固然了還有更完美的瓦片式繪製的方法,咱們這裏就說瓦片式繪製方法了。
如此一來就解決了IOS上的兩種限制了。
除了上面所述的限制,還有兩個坑,一個就是canvas的toDataURL是隻能壓縮jpg的(這句話的詳細解釋能夠看下面的Tip講解
),當用戶上傳的圖片是png的話,就須要轉成jpg,也就是統一用canvas.toDataURL('image/jpeg', 0.5) , 類型統一設成jpeg,而壓縮比就本身控制了。
另外一個就是若是是png轉jpg,繪製到canvas上的時候,canvas存在透明區域的話,當轉成jpg的時候透明區域會變成黑色,由於canvas的透明像素默認爲rgba(0,0,0,0),因此轉成jpg就變成rgba(0,0,0,1)了,也就是透明背景會變成了黑色。解決辦法就是繪製以前在canvas上鋪一層白色的底色。
在壓縮圖片以前,咱們判斷圖片角度,若是圖片角度不正確,還須要用EXIF.js把圖片角度糾正過來。
壓縮完圖片,把base64的圖片數據轉成二進制數據存儲到暫存區中,等待被getBlobList獲取使用。
Tip:
canvas的toDataURL是隻能壓縮jpg
這句話我可能說的不清楚,我想表達的意思是這個api不管是jpeg仍是png,最後導出的時候,都跟jpeg沒啥差異了。由於png圖片的透明性質在canvas中是無效的,會被canvas添加默認的黑色背景,我在文中講解的時候,用白色背景處理了,因此最後導出的圖片,不管你設置的是png仍是jpeg都跟jpeg沒啥區別了,由於沒法保持png的透明度性質了
(function(window) {
/** * * 做者:混沌傳奇 * * 郵箱地址:iot-pro_lizeng@foxmail.com * * 日期:2017-10-26 * * 插件功能:壓縮圖片&&糾正圖片方向&&返回二進制(Blob)圖片元數據組成的列表 * */
window.lzImgProcess = function () {
var Orientation = '', //圖片方向角
blobList = [], //壓縮後的二進制圖片數據列表
canvas = document.createElement("canvas"), //用於壓縮圖片(糾正圖片方向)的canvas
ctx = canvas.getContext('2d'),
file_type = 'image/jpeg', //圖片類型
qlty = 0.5, //圖片壓縮品質,默認是0.5,可選範圍是0-1的數字類型的值,可配置
imgWH = 1000; //壓縮後的圖片的最大寬度和高度,默認是1000px,可配置
/** * @actionName process, * 方法功能:壓縮圖片&&糾正圖片方向&&返回二進制(Blob)圖片元數據 * * @param fileList,傳入函數的文件列表對象,fileList對象是來自用戶在一個<input>元素上選擇文件後返回的FileList對象 * 注意:圖片類型必須是jpeg||png * 好比:<input id="uploadImage" onchange="loadImageFile();" /> * function loadImageFile() { * //獲取返回的fileList對象 * var fileList = document.getElementById("uploadImage").files; * } * @param getBlobList [Blob],獲取壓縮結果的鉤子函數,接受一個參數。 * 功能:在圖片壓縮完畢後,獲取壓縮後的二進制圖片數據對象組成的數組,參數即:壓縮後的二進制圖片數據(blob)組成的list * * @param quality,傳入函數的圖片壓縮比率(品質),可選範圍0-1的數字類型的值,默認是0.5 * * @param WH,傳入函數的圖片壓縮後的最大圖片寬度和高度,默認是1000,單位是px,可自由配置。 * 注意:最好不要超過1000,數字過大,容易致使canvas壓縮失敗。因爲沒作瓦片處理,因此有這個限制。1000*1000的圖片在前端中,基本也夠用了。 * */
function process (fileList, getBlobList, quality, WH) {
blobList = []; //初始化blobList
// 判斷參數fileList的長度是否大於0
if (!fileList.length){
console.log('警告:傳進方法process的參數fileList長度必須大於零!!!')
return;
}
//若是quality參數有值,則把quality賦值給qlty(圖片壓縮的品質)
if(quality)
qlty = quality;
//若是WH參數有值,則把WH賦值給imgWH(壓縮後的圖片的最大寬度和高度)
if(WH&&WH<1000&&WH>0){
imgWH = WH;
}
// 把傳進來的fileList轉爲數組類型
var files = Array.prototype.slice.call(fileList);
files.forEach(function (file, i) {
if (!/\/(?:jpeg|png)/i.test(file.type)){
console.log('警告:圖片必須是jpeg||png類型!!!');
return;
}
// file_type = file.type;
var reader = new FileReader();
// 獲取圖片壓縮前大小,打印圖片壓縮前大小
var size = file.size/1024 > 1024 ? (~~(10*file.size/1024/1024))/10 + "MB" : ~~(file.size/1024) + "KB";
// console.log('size:', size)
reader.onload = function () {
var img = new Image();
img.src = this.result;
// 圖片加載完畢以後進行壓縮
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
//獲取照片方向角屬性,用戶旋轉控制
EXIF.getData(img, function() {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
// alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
console.log('Orientation:', Orientation)
if(Orientation == ""||Orientation == undefined||Orientation == null){
Orientation = 1;
}
});
//獲取壓縮後的圖片二進制數據
var data = GetImgCompress(img);
//將二進制數據塞入到二進制數據列表中
blobList.push(data);
//將壓縮後的二進制圖片數據對象(blob)組成的list經過鉤子函數返回出去
if(blobList.length===files.length){
if(getBlobList)
getBlobList(blobList);
}
img = null;
}
};
reader.readAsDataURL(file);
})
}
/** * @actionName GetImgCompress, * 功能:判斷上傳圖片的方向,若是不是正確的,進行修正,並對圖片進行壓縮,壓縮完後,返回壓縮後的二進制圖片數據 * * @param img, 用來壓縮的圖片對象 * * @returns 返回的壓縮後的二進制圖片數據 */
function GetImgCompress(img){
//若是方向角不爲1,都須要進行旋轉
if(Orientation != 1){
switch(Orientation){
case 6://須要順時針90度旋轉
rotateImg(img,'right',canvas);
break;
case 8://須要逆時針90度旋轉
rotateImg(img,'left',canvas);
break;
case 3://須要180度旋轉
rotateImg(img,'right2',canvas);//轉兩次
break;
}
}else{
//不作旋轉
rotateImg(img,'no',canvas);
}
var ndata;
ndata = canvas.toDataURL(file_type, qlty);
//打印壓縮先後的大小,以及壓縮比率
// var initSize = img.src.length;
// console.log('壓縮前:' + initSize);
// console.log('壓縮後:' + ndata.length, 'base64數據', ndata);
// console.log('壓縮率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
//將壓縮後的base64數據轉爲二進制數據
ndata = dataURItoBlob(ndata);
//清除canvas畫布的寬高
canvas.width = canvas.height = 0;
return ndata;
}
/** * @actionName rotateImg, * 功能:對圖片旋轉處理 * * @param img, 用來矯正方向的圖片對象 * * @param direction, 旋轉方向 * * @param canvas, 用來繪製圖片的cavas畫布對象 */
function rotateImg(img, direction,canvas) {
//最小與最大旋轉方向,圖片旋轉4次後回到原方向
var min_step = 0;
var max_step = 3;
if (img == null)return;
//img的高度和寬度不能在img元素隱藏後獲取,不然會出錯
var height = img.height;
var width = img.width;
if(width>imgWH || height>imgWH){
var ratio = ~~(height/width*10)/10;
if(width>height){
width = imgWH;
height = imgWH*ratio;
}else{
height = imgWH;
width = height/ratio;
}
img.width = width;
img.height = height;
}
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'no'){
step = 0;
} else if (direction == 'left') {
step++;
//旋轉到原位置,即超過最大值
step > max_step && (step = min_step);
} else if (direction == 'right') {
step--;
step < min_step && (step = max_step);
} else {
//旋轉180度
}
//旋轉角度以弧度值爲參數
var degree = step * 90 * Math.PI / 180;
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
// 鋪底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, width, height);
ctx.drawImage(img, 0, 0, width, height);
break;
case 1:
canvas.width = height;
canvas.height = width;
// 鋪底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, height, width);
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
canvas.width = width;
canvas.height = height;
// 鋪底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, width, height);
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
canvas.width = height;
canvas.height = width;
// 鋪底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, height, width);
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
}
}
/** * dataURL to blob, ref to https://gist.github.com/fupslot/5015897 * @param dataURI,圖片的base64格式數據 * @returns {Blob} */
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
/** * 返回一個process方法 * * process方法:用來壓縮圖片數據,在壓縮圖片的同時,默認會調用correctOrientation方法糾正圖片方向。 * */
return process;
}
})(window)
複製代碼
Exif.js 提供了 JavaScript 讀取圖像的原始數據的功能擴展,例如:拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。
Exif.js官方github 倉庫地址:github.com/exif-js/exi…
完成圖片壓縮後,就能夠獲取壓縮後的圖片二進制數據了,把獲取到的圖片二進制數據存起來;獲取到數據後,能夠拿來預覽。
因爲實際項目中,每一個項目的UI樣式設計可能不同,開發者能夠根據本身的UI樣式來預覽圖片。
//獲取壓縮後的圖片
function getCompressiveFileList(fileList) {
blobFileList = fileList;
// console.log('fileBlobList:', fileList);
fileList.forEach(function (blob) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("LI")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.imgCompress_list').appendChild(li)
}
reader.readAsDataURL(blob);
})
}
複製代碼
new一個formdata對象,將上一步獲取到的 blobFileList 圖片二進制數據 append 到 formdata中,用任意你喜歡的ajax庫進行上傳。固然也能夠用原生ajax上傳。
//將壓縮後的二進制圖片數據流append到formdata對象中上傳到後臺服務器
//注意:上傳的是formdata對象,後臺接口接收的時候,也要從formdata對象中讀取二進制數據流
function formUpData(blobFiles){
var formData = new FormData();
formData.append("files", blobFiles);
var xhr = new XMLHttpRequest();
//連接你本身上傳圖片接口便可,這裏的接口地址,是我寫的示例,不可真實使用,講解意義更大
xhr.open('post', 'http://xxx/welcome/index/');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('上傳成功!');
}
};
xhr.send(formData);
}
複製代碼
完整代碼以及demo:git倉庫地址
文中用到了一些H5的知識點,不懂的童鞋能夠進入下面的知識點資料地址,詳細閱讀
HTMLCanvasElement.toDataURL()
CanvasRenderingContext2D.drawImage()
FileReader()
FormData
Blob()
EXIF.js中文博客文章