JavaScript 可以使用類似於 canvas 和 web workers 來實現圖像壓縮。 使用 canvas,可以將圖像繪製到 canvas 上,然後使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉換為不同格式的圖像。在這些方法中指定圖像質量參數即可實現壓... ...
JavaScript 可以使用類似於 canvas 和 web workers 來實現圖像壓縮。
使用 canvas,可以將圖像繪製到 canvas 上,然後使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉換為不同格式的圖像。在這些方法中指定圖像質量參數即可實現壓縮。
使用 web workers,可以在後臺執行圖像壓縮,以避免阻塞 UI 線程。
但是 javascript 因為安全限制,不能操作本地文件,所以一般使用在瀏覽器端上傳圖片,使用js進行壓縮處理,上傳到服務端,後續處理。
在 JavaScript 中進行圖像壓縮有一些第三方庫可供使用,比如:
- canvas-toBlob.js: 在不支持 toBlob() 的瀏覽器中提供對 toBlob() 的支持。
- lwip: 一個 JavaScript 的圖像處理庫,可以實現圖像的壓縮,旋轉,裁剪等操作
- browser-image-resizer: 基於 canvas 和 web workers 的 JavaScript 圖像壓縮庫。
- jpeg-js: 使用 JavaScript 實現的 JPEG 壓縮庫,可以在瀏覽器或 Node.js 環境中使用。
使用這些庫進行壓縮時需要註意的是,它們在性能上可能有所限制。對於大型圖像,壓縮可能需要相當長的時間。可能需要在用戶上傳圖像時顯示載入條或消息,以提醒用戶正在進行壓縮。
一、簡單壓縮
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪製到 canvas 上,然後使用 toDataURL() 方法將圖像轉換為 Data URL 形式。Data URL 是一種將數據嵌入 URL 的格式,可以在不需要網路請求的情況下直接在瀏覽器中載入圖像。
在調用 toDataURL() 方法時,可以使用第二個參數來指定圖像質量。該參數的值應該在 0 到 1 之間,表示圖像質量的百分比。0 表示最低質量,1 表示最高質量。
這是一個使用 canvas 和 JavaScript 壓縮圖像的示例代碼:
// 獲取 canvas 元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 創建 Image 對象
var img = new Image();
img.src = 'image.jpg';
img.onload = function() {
// 繪製圖像到 canvas
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
// 使用 toDataURL 方法壓縮圖像
var dataUrl = canvas.toDataURL('image/jpeg', 0.5);
// 使用新的 Data URL 更新圖像
img.src = dataUrl;
}
這個例子中,圖片會使用 jpeg 格式壓縮,質量為50%,壓縮後的圖片會被重新賦值回img.src里,可以改變其他參數得到不同的壓縮效果
二、使用canvas 將base64 圖像壓縮到指定文件大小以內
1、 方法一
首先使用 atob() 函數將 base64 圖像數據解碼為二進位字元串,然後創建一個新的 Blob 對象,並使用 FileReader 讀取 Blob 對象。
接下來,使用 canvas 的 drawImage() 方法將圖像繪製到 canvas 上,並使用 canvas.toBlob() 方法將圖像轉換為 Blob 對象。
最後,檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過,使用不同的圖像質量再次壓縮圖像,直到它的大小小於給定的最大大小為止.
下麵是一個示例代碼:
var maxSize = 100 * 1024; // 最大文件大小為100KB
var img = new Image();
img.src = base64Image;
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
var quality = 0.8;
var resultBlob;
do {
canvas.toBlob(function (blob) {
resultBlob = blob;
}, 'image/jpeg', quality);
quality -= 0.1;
} while (resultBlob.size > maxSize && quality > 0.1);
// do something with resultBlob, like create a new image from it or save it.
}
這個示例代碼使用 canvas 將 base64 圖像壓縮到指定的最大文件大小以內。它使用了一個 do-while 迴圈來不斷地減小圖像質量直到圖像的文件大小符合限製為止。最後它生成了一個 resultBlob 對象,它可以被用來更新頁面上的圖像或者存儲到伺服器上。
值得註意的是,這個示例代碼中進行圖像壓縮時的質量是每次減少0.1,如果壓縮後的圖像的文件大小仍然超出限制,可能需要調整這個減少量,或者考慮其他壓縮策略,比如更改圖像的解析度等。在這個例子中壓縮文件大小是每次只減少0.1,這樣可能會花費很長時間,在實際應用中需要根據需求來進行調整。 2.、方法二遞歸方式可避免迴圈導致壓縮處理過程中,頁面提示無法顯示的問題
// 計算base64編碼圖片大小
function getBase64ImageSize(base64) {
const indexBase64 = base64.indexOf('base64,');
if (indexBase64 < 0) return -1;
const str = base64.substr(indexBase64 + 6);
// 大小單位:位元組
return (str.length * 0.75).toFixed(2);
}
/**
* 圖像壓縮,預設同比例壓縮
* @param {Object} imgPath
* 圖像base64編碼字元串或圖像可訪問路徑
* @param {Object} obj
* obj 對象 有 width, height, quality(0-1)
* @param {Object} maxSize
* 指定壓縮後的文件大小,單位:位元組
* @param {Object} callback
* 回調函數有一個參數,base64的字元串數據
*/
function compressedImage(path, obj, maxSize, callback) {
let img = new Image();
img.src = imgPath;
img.onload = function () {
const that = this;
// 預設按比例壓縮
let w = that.width,
h = that.height,
scale = w / h;
w = obj.width || w;
h = obj.height && obj.height * (w / scale) || h;
// 生成canvas
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
ctx.drawImage(that, 0, 0, w, h);
// 圖像質量,預設圖片質量為0.8
let quality = 0.8;
if (obj.quality && obj.quality > 0 && obj.quality <= 1) {
quality = obj.quality;
}
// quality值越小,所繪製出的圖像越模糊
let newBase64Image = canvas.toDataURL('image/jpeg', quality);
let fileSize = getBase64ImageSize(newBase64Image);
if (fileSize > maxSize && quality > 0.01) {
if (quality > 0.05) {
quality = quality - 0.05;
} else {
quality = 0.01;
}
compressedImage(imgPath, {
quality: quality
}, maxSize, callback);
return;
}
// 回調函數返回壓縮後的 base64圖像
callback(newBase64Image);
}
}
三、使用 canvas 和 web workers 來實現圖像壓縮
JavaScript 的 Web Workers API 允許在瀏覽器中創建多個線程,可以在後臺線程中執行 JavaScript 代碼,而不會影響主線程的響應性。因此,可以使用 Web Workers 來執行計算密集型任務,例如圖像壓縮。
下麵是一個簡單的示例代碼,展示瞭如何使用 Web Workers 在後臺線程中執行圖像壓縮:
// 在主線程中
var worker = new Worker('worker.js');
worker.onmessage = function(e) {
var compressedImage = e.data;
// do something with compressedImage
};
worker.postMessage({
image: base64Image,
maxSize: 100 * 1024 // 最大文件大小為100KB
});
// worker.js
self.onmessage = function(e) {
var image = e.data.image;
var maxSize = e.data.maxSize;
var img = new Image();
img.src = image;
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = img.width;
var height = img.height;
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
var quality = 0.8;
var resultBlob;
do {
canvas.toBlob(function(blob) {
resultBlob = blob;
self.postMessage(resultBlob);
}, 'image/jpeg', quality);
quality -= 0.1;
} while (resultBlob.size > maxSize && quality > 0.1);
}
};
這個示例代碼中,在主線程中通過創建一個 Worker 對象並載入一個 worker.js 文件來啟動一個後臺線程. 在 worker.js 中,我們在 onmessage 中定義了圖像壓縮的邏輯,並使用 postMessage 來將壓縮後的圖像發送回主線程。這樣做的優點在於,將圖像壓縮的計算密集型任務放到了後臺線程中進行,可以保證主線程的響應性不會受到影響。這樣能夠避免因為計算密集型任務而導致頁面卡頓或延遲。
需要註意的是,Web Workers 不能直接訪問 DOM,所以需要使用 postMessage 在主線程和後臺線程之間傳遞數據。
這隻是一個簡單的示例,實際應用中可能需要根據需求進行更多的定製。
作者:yuzhihui出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!