前端奇淫技術：圖片壓縮、方向糾正、預覽、上傳外掛
前言
相信大家在做專案過程中，經常會遇到上傳圖片到後端，但是由於圖片過大，需要對圖片壓縮處理。特別在移動端，手機拍的照片普遍過於大了，我們有時候只是需要上傳一張頭像，很小就夠用了。還有在部分手機上（已知蘋果手機）拍的照片存在方向角度問題，這時就需要我們來糾正圖片角度了。
很多同學多數時候是在用別人寫好的圖片壓縮上傳外掛。針對我們的需求，這些外掛有時候不能達到我們最理想的效果，自己寫呢，又不會寫，很是頭疼。今天就深入剖析講解下，教會大家編寫自己的圖片壓縮、方向糾正外掛，以及預覽和上傳壓縮後圖片資料。
文中用到的一些H5的api和EXIF.js等知識點如果不懂的話，請先閱讀文末尾的結語中的知識點資料。
實現原理
壓縮圖片並且上傳主要用到filereader、canvas 以及 formdata 這三個h5的api和外掛EXIF.js。邏輯並不難。整個過程就是：
（1）使用者使用input file上傳圖片的時候，用filereader讀取使用者上傳的圖片資料（base64格式）
（2）把圖片資料傳入img物件，然後將img繪製到canvas上，用EXIF.js對圖片方向進行糾正，再呼叫canvas.toDataURL對圖片進行壓縮，獲取到壓縮後的base64格式圖片資料，轉成二進位制
（3）獲取到壓縮後的圖片二進位制資料，預覽。
（4）將壓縮後的圖片二進位制資料塞入formdata，再透過XmlHttpRequest提交formdata
如此四步，就完成了圖片的壓縮、方向糾正、預覽和上傳。
外掛設計思考
考慮到在實際專案中，可能用不同的開發框架（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
* @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', ');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('上傳成功！');
}
};
xhr.send(formData);
}
文中用到了一些H5的知識點，不懂的童鞋可以進入下面的知識點資料地址，詳細閱讀
HTMLCanvasElement.toDataURL()
CanvasRenderingContext2D.drawImage()
FileReader()
FormData
Blob()
EXIF.js中文部落格文章
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2637089/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 手把手教你如何編寫一個前端圖片壓縮、方向糾正、預覽、上傳外掛前端
- 前端圖片壓縮及上傳前端
- 自動壓縮上傳的JPG/PNG圖片Wordpress外掛-TinyPNG
- JQuery外掛：圖片上傳本地預覽外掛，改進案例一則。jQuery
- 前端的圖片壓縮image-compressor（可在圖片上傳前實現圖片壓縮）前端
- js上傳圖片壓縮JS
- 前端手勢控制圖片外掛書寫四(圖片上傳及Ios圖片方向問題）前端iOS
- vue 上傳圖片進行壓縮圖片Vue
- JS—圖片壓縮上傳（單張）JS
- vue圖片預覽上傳Vue
- js圖片上傳預覽JS
- 前端圖片壓縮方案前端
- layui中實現上傳圖片壓縮UI
- 前端圖片壓縮 - H5&Uni-App圖片壓縮前端H5APP
- input file上傳圖片預覽
- 基於 vue.js 實現圖片本地預覽 + 裁剪 + 壓縮 + 上傳的功能（二）Vue.js
- megapix-image外掛 使用Canvas壓縮圖片上傳 MegaPixImage.js下載APICanvasJS
- jquery圖片上傳外掛HHuploadifyjQuery
- 深度學習之圖片壓縮技術深度學習
- [外掛擴充套件]圖片批量上傳外掛2.0套件
- 一個Vue圖片上傳剪裁壓縮元件Vue元件
- javauploadify上傳圖片並預覽Java
- 前端圖片預覽前端
- 在瀏覽器端用H5實現圖片壓縮上傳瀏覽器H5
- 用Kotlin擼一個圖片壓縮外掛-外掛基礎篇(二)Kotlin
- 【前端】壓縮圖片以及圖片相關概念前端
- Android如何壓縮圖片上傳服務端Android服務端
- Chrome外掛：切圖壓縮工具Chrome
- Android壓縮圖片後再上傳圖片Android
- 前端實現圖片上傳預覽並轉換base64前端
- jQuery圖片上傳前先在本地預覽jQuery
- 菜鳥學JS（一）——上傳圖片之上傳前預覽圖片JS
- java，springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地，壓縮圖片上傳(有些圖片會失真)，原圖上傳JavaSpring Boot伺服器
- 上傳圖片本地預覽例項程式碼
- 圖片上傳預覽效果程式碼例項
- PHP仿微信多圖片預覽上傳功能PHP
- 如何使用FormData上傳壓縮裁剪後的圖片Blob物件ORM物件
- 專案分享五：H5圖片壓縮與上傳H5