Canvas 進階（六）實現圖片壓縮功能
功能體驗
先看demo：圖片壓縮css
項目源碼：github前端
效果以下：webpack
實現功能
- 可以獲取壓縮後的 base64 圖片
- 可以獲取壓縮後的圖片節點，並能替換文檔中的圖片節點
- 可以獲取壓縮後的 canvas 進行二次繪製，並能替換文檔中的 canvas
- 能過獲取壓縮後的 blob 文件
- 可以下載壓縮後的圖片
具體實現
前端實現壓縮功能，從圖片大小和質量兩方面着手：縮小圖片和下降圖片質量git
所以咱們設計一個 imageCompress 類，傳入一個 option, 其參數有：github
file: url 或 file
width: 輸出圖片的寬度
height: 輸出圖片的高度
mineType: 輸出圖片的格式，默認爲image/png
quality: 輸出圖片的畫質。值爲0～1,默認爲1
複製代碼
由於圖片的加載是一個異步的過程，所以咱們須要藉助 promise, 以new ImageCompress(option).then(instance => {})建立並在 then 中調用實例的方法。由於 file 能夠是 url 也能夠是 file 對象，所以在構建函數中需對這兩種狀況分別判斷，並在結束時返回 promiseweb
1. 建立此類
class imageCompress {
constructor(options) {
this._img = null; // 原始圖片
this._compressedImg = null; // 壓縮後的圖片
this._canvas = null; // 建立的canvas
this._blob = null; // 建立的blob
// 默認設置
this.options = {
mimeType: 'image/png',
quality: 1,
};
// 合併默認參數與用戶參數
extend(this.options, options, true);
// 文件爲傳入拋出錯誤
if (!options.file) {
throw new Error('圖片未傳入');
}
let that = this;
if (typeof options.file === 'string') {
let img = (this._img = new Image());
// 解決跨域報錯問題
img.setAttribute('crossOrigin', 'anonymous');
img.src = options.file;
return new Promise((resolve, reject) => {
img.onload = function() {
resolve(that);
};
img.onerror = function(...args) {
reject(new Error('圖片加載失敗'));
};
});
} else if (typeof options.file === 'object' && options.file.name) {
// 判斷文件的後綴是否爲圖片
if (!isAssetTypeAnImage(options.file.name)) {
throw new Error('該文件不是圖片');
}
let image = (this._img = new Image());
return new Promise((resolve, reject) => {
if (window.URL) {
image.src = window.URL.createObjectURL(options.file);
} else {
const reader = new FileReader();
reader.onload = e => {
image.src = e.target.result;
};
reader.onabort = () => {
reject(
new Error(
'Aborted to load the image with FileReader.'
)
);
};
reader.onerror = () => {
reject(
new Error(
'Failed to load the image with FileReader.'
)
);
};
reader.readAsDataURL(options.file);
}
image.onload = function() {
resolve(that);
};
image.onerror = function(...args) {
reject(new Error('圖片加載失敗'));
};
});
}
}
}
複製代碼
2. 獲取 canvas 和與頁面 canvas 進行替換功能
咱們在構建函數中已經將傳入的圖片加載並賦值給了 this._img, 接下來建立一個 canvas, 並將此圖片按設置的大小畫出來，便獲得目標 canvas; 替換一個節點，先找出其父節點，並用一個新節點替換 oldNode.parentNode.replaceChild(newNode, oldNode);算法
// 獲取canvas,可用於二次加工繪製
getCanvas() {
if (!this._canvas) this._imagetoCanvas();
return this._canvas;
}
// 私有方法，圖片轉canvas
_imagetoCanvas() {
let image = this._img;
var cvs = (this._canvas = document.createElement('canvas'));
var ctx = cvs.getContext('2d');
cvs.width = this.options.width || image.width;
// 高度默認等比例壓縮
cvs.height = this.options.width
? (this.options.width * image.height) / image.width
: image.height;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
}
// 替換文檔canvas節點
replaceCanvasNode(oldNode) {
let newNode = this.getCanvas();
// 使新節點具備舊節點的id,類名，樣式
newNode.style.cssText = oldNode.style.cssText;
newNode.id = oldNode.id;
newNode.className = oldNode.className;
// 用新節點替換舊節點
oldNode.parentNode.replaceChild(this.getCanvas(), oldNode);
}
複製代碼
3. 獲取壓縮後的圖片base64
前一步咱們已經可以獲取 canvas，將 canvas 調用 canvas.toDataURL(this.options.mimeType, this.options.quality)便可獲取 base64npm
getImageBase64() {
let canvas = this.getCanvas()
return canvas.toDataURL(this.options.mimeType, this.options.quality);
}
複製代碼
4. 獲取壓縮後的文件
獲取blob調用 canvas.toBlob(callback,mimeType,quality), 因爲此過程也是異步，所以返回 promisecanvas
// 獲取壓縮後的文件，return promise.resolve(blob)
getCompressFile() {
if (!this._canvas) this._imagetoCanvas();
let that = this;
return new Promise((resolve, reject) => {
that._canvas.toBlob(
blob => {
that._blob = blob;
resolve(blob);
},
that.options.mimeType, // 圖片類型
that.options.quality // 圖片質量
);
});
}
複製代碼
5. 獲取壓縮後的 img 節點與頁面 img 進行替換功能
令 this._compressedImg 指向壓縮後的圖片，咱們的目標是找到 image 的 src 屬性，有兩種方法 URL.createObjectURL(blob) 和 new FileReader().readAsDataURL(blob), 所以咱們需調用第 4 步實現的方法 getCompressFile 獲取 blobsegmentfault
// 獲取壓縮後的圖片節點
getCompressImageNode() {
// 若是壓縮後的圖片已經建立，則不須要重複建立，返回便可
if (this._compressedImg && this._compressedImg.src)
return Promise.resolve(this._compressedImg);
let image = (this._compressedImg = new Image());
return this.getCompressFile().then(blob => {
if (window.URL) {
image.src = window.URL.createObjectURL(blob);
} else {
const reader = new FileReader();
reader.onload = e => {
image.src = e.target.result;
};
// 終止事件
reader.onabort = () => {
return Promise.reject(
new Error('Aborted to load the image with FileReader.')
);
};
reader.onerror = () => {
return Promise.reject(
new Error('Failed to load the image with FileReader.')
);
};
reader.readAsDataURL(blob);
}
return Promise.resolve(image);
});
}
// 替換頁面圖片
replaceImageNode(oldNode) {
this.getCompressImageNode().then(image => {
image.style.cssText = oldNode.style.cssText;
image.id = oldNode.id;
image.className = oldNode.className;
oldNode.parentNode.replaceChild(image, oldNode);
});
}
複製代碼
6. 下載壓縮後的文件
當 this._compressedImg 被賦值且其 src 屬性存在時，能夠直接建立 a 標籤下載；若沒有建立壓縮後的 img， 則調用上一步建立的 getCompressImageNode() 方法獲取壓縮後的 img, 再進行下載
// 下載壓縮後的文件
downloadCompressFile(name = 'compress-file') {
if (this.blob && this._compressedImg) {
const dataURL = this._compressedImg.src;
const link = document.createElement('a');
link.download = name;
link.href = dataURL;
link.dispatchEvent(new MouseEvent('click'));
} else {
this.getCompressImageNode().then(image => {
const dataURL = image.src;
const link = document.createElement('a');
link.download = name;
link.href = dataURL;
link.dispatchEvent(new MouseEvent('click'));
});
}
}
複製代碼
demo 測試
對上述7個功能進行測試，效果及代碼以下：
new imageCompress({
file:
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=26&gp=0.jpg',
width: 500,
quality: 1,
mimeType: 'image/jpeg',
})
.then(instance => {
// 獲取canvas，可用於自行加工繪製
let canvas = instance.getCanvas();
let context = canvas.getContext('2d');
context.moveTo(100, 100);
context.lineTo(50, 50);
context.stroke();
// 替換文檔中存在圖片節點
instance.replaceImageNode(document.getElementById('img'));
// 替換文檔中存在的canvas節點
instance.replaceCanvasNode(document.getElementById('canvas'));
// 獲取壓縮後生成的image節點
instance.getCompressImageNode().then(image => {
console.log(image)
});
// // 獲取壓縮後的blob文件，可用於上傳
instance.getCompressFile().then(blob => {
});
// 獲取圖片base64
let base64 = instance.getImageBase64();
// 下載壓縮後文件
// instance.downloadCompressFile();
})
.catch(err => {
console.log(err);
});
複製代碼
以上是我能想到的圖片壓縮的7個功能，若是你有想到其餘的需求，歡迎在評論區留言。若是文中有錯漏，也歡迎指出！
更多推薦
Canvas 進階（二）寫一個生成帶logo的二維碼npm插件
Canvas 進階（三）ts + canvas 重寫」辨色「小遊戲
相關文章
- 1. 前端實現壓縮圖片功能
- 2. canvas圖片壓縮
- 3. canvas壓縮圖片
- 4. 小程序canvas實現圖片壓縮
- 5. Canvas實現圖片壓縮上傳
- 6. 使用canvas實現圖片壓縮
- 7. 利用 canvas 實現壓縮圖片
- 8. java實現上傳圖片並壓縮圖片大小功能
- 9. 使用Canvas壓縮圖片
- 10. 利用 canvas 壓縮圖片
- 更多相關文章...
- • 使用Redis和Lua的原子性實現搶紅包功能 - 紅包項目實戰
- • Markdown 圖片 - Markdown 教程
- • ☆基於Java Instrument的Agent實現
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端實現壓縮圖片功能
- 2. canvas圖片壓縮
- 3. canvas壓縮圖片
- 4. 小程序canvas實現圖片壓縮
- 5. Canvas實現圖片壓縮上傳
- 6. 使用canvas實現圖片壓縮
- 7. 利用 canvas 實現壓縮圖片
- 8. java實現上傳圖片並壓縮圖片大小功能
- 9. 使用Canvas壓縮圖片
- 10. 利用 canvas 壓縮圖片