如何使用JavaScript對圖像進行壓縮
JavaScript 可以使用類似于 canvas 和 web workers 來實現圖像壓縮。
使用 canvas，可以將圖像繪制到 canvas 上，然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法將其轉換為不同格式的圖像。在這些方法中指定圖像質量參數即可實現壓縮。
使用 web workers，可以在后臺執(zhí)行圖像壓縮，以避免阻塞 UI 線程。
但是在瀏覽器環(huán)境下，JavaScript 因為安全限制，不能操作本地文件，所以一般使用在瀏覽器端上傳圖片，使用 JavaScript 進行壓縮處理，上傳到服務端，后續(xù)處理。
一、簡單壓縮
使用 JavaScript 和 canvas 壓縮圖像可以使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，然后使用 toDataURL() 方法將圖像轉換為 Data URL 形式。Data URL 是一種將數據嵌入 URL 的格式，可以在不需要網絡請求的情況下直接在瀏覽器中加載圖像。
在調用 toDataURL() 方法時，可以使用第二個參數來指定圖像質量。該參數的值應該在 0 到 1 之間，表示圖像質量的百分比。0 表示最低質量，1 表示最高質量。
這是一個使用 canvas 和 JavaScript 壓縮圖像的示例代碼：
// 創(chuàng)建 Image 對象
var img = new Image();
img.src = "image.jpg";
img.onload = function () {
var _this = this;
// 獲取 canvas 元素
var canvas = document.getElementById("canvas");
// 繪制圖像到 canvas
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(_this, 0, 0, img.width, img.height);
// 使用 toDataURL 方法壓縮圖像
var dataUrl = canvas.toDataURL("image/jpeg", 0.5);
// 使用新的 Data URL 更新圖像
};
這個例子中，圖片會使用 jpeg 格式壓縮，質量為 50%，壓縮后的圖片會被重新賦值回 img.src 里，可以改變其他參數得到不同的壓縮效果
二、使用 canvas 將 base64 圖像壓縮到指定文件大小以內
1、 方法一
1.1、通過循環(huán)遍歷由大到小的圖像質量系數來確定合適的系數
首先使用 canvas 的 drawImage() 方法將圖像繪制到 canvas 上，并使用 base64ToBlob() 方法將 base64 圖像轉換為 Blob 對象。
再檢查生成的 Blob 的大小是否超過指定的最大大小。 如果超過，使用不同的圖像質量再次壓縮圖像，直到它的大小小于給定的最大大小為止。
下面是一個示例代碼：
var maxSize = 100 * 1024; // 最大文件大小為100KB
var img = new Image();
img.src = "base64 or path";
img.onload = function () {
const _this = this;
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(_this, 0, 0, width, height);
var quality = 0.8;
let newBase64Image, resultBlob;
do {
newBase64Image = canvas.toDataURL("image/jpeg", quality);
resultBlob = base64ToBlob(newBase64Image);
quality -= 0.1;
} while (resultBlob.size > maxSize && quality > 0.1);
};
// 將base64 轉換為Blob
function base64ToBlob(base64) {
var arr = base64.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,
});
}
這個示例代碼使用 canvas 將 base64 圖像壓縮到指定的最大文件大小以內。它使用了一個 do-while 循環(huán)來不斷地減小圖像質量直到圖像的文件大小符合限制為止。最后它生成了一個 resultBlob 對象，它可以被用來更新頁面上的圖像或者存儲到服務器上。
值得注意的是，這個示例代碼中進行圖像壓縮時的質量是每次減少 0.1，如果壓縮后的圖像的文件大小仍然超出限制，可能需要調整這個減少量，或者考慮其他壓縮策略，比如更改圖像的分辨率等。在這個例子中壓縮文件大小是每次只減少 0.1，這樣可能會花費很長時間，在實際應用中需要根據需求來進行調整。
1.2、通過二分查找算法更快速確定合適的圖像質量系數
var maxSize = 100 * 1024; // 最大文件大小為100KB
var img = new Image();
img.src = "base64 or path";
img.onload = function () {
const _this = this;
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(_this, 0, 0, width, height);
var quality = 0.8;
let newBase64Image = canvas.toDataURL("image/jpeg", quality);
let fileSize = getBase64ImageSize(newBase64Image);
if (fileSize > maxSize) {
const qualityArr = [],
step = 0.01;
for (let i = step; i <= quality; i += step) {
// qualityArr.push(parseFloat(i.toFixed(2)));
qualityArr.push(parseFloat(i));
}
let left = 0,
right = qualityArr.length - 1;
do {
const mid = Math.floor((left + right) / 2);
newBase64Image = canvas.toDataURL("image/jpeg", qualityArr[mid]);
fileSize = getBase64ImageSize(newBase64Image);
if (fileSize > maxSize) {
right = mid - 1;
} else {
left = mid + 1;
}
} while (left <= right);
}
};
// 計算base64編碼圖片大小
function getBase64ImageSize(base64) {
const indexBase64 = base64.indexOf("base64,");
if (indexBase64 < 0) return -1;
const str = base64.substr(indexBase64 + 6);
// 大小單位：字節(jié)
return (str.length * 0.75).toFixed(2);
}
該方法由 @Wuya 提出的建議進行改進。
2.、方法二：遞歸代替迭代(do-while 循環(huán))
遞歸方式可避免迭代導致壓縮處理過程中，頁面提示組件無法顯示的問題
2.1、遞歸遍歷遞減圖像質量系數確定合適的系數
// 計算base64編碼圖片大小
function getBase64ImageSize(base64) {
const indexBase64 = base64.indexOf("base64,");
if (indexBase64 < 0) return -1;
const str = base64.substr(indexBase64 + 6);
// 大小單位：字節(jié)
return (str.length * 0.75).toFixed(2);
}
/**
* 圖像壓縮，默認同比例壓縮
* @param {Object} imgPath
* 圖像base64編碼字符串或圖像可訪問路徑
* @param {Object} obj
* obj 對象 有 width， height， quality(0-1)
* @param {Object} maxSize
* 指定壓縮后的文件大小，單位：字節(jié)
* @param {Object} callback
* 回調函數有一個參數，base64的字符串數據
*/
function compressedImage(path, obj, maxSize, callback) {
let img = new Image();
img.src = imgPath;
img.onload = function () {
const _this = this;
// 默認按比例壓縮
let w = _this.width,
h = _this.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(_this, 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;
}
if (!!callback) {
// 回調函數返回壓縮后的 base64 圖像
callback(newBase64Image);
}
};
}
2.2、遞歸二分查找確定圖像質量系數（由 2.1 進行改進），并增加寬高壓縮率（最終完整版，推薦）
// 計算 base64 編碼圖片大小
function getBase64ImageSize(base64) {
const indexBase64 = base64.indexOf("base64,");
if (indexBase64 < 0) return -1;
const str = base64.substr(indexBase64 + 6);
// 大小單位：字節(jié)
return (str.length * 0.75).toFixed(2);
}
/**
* 圖像壓縮，默認同比例壓縮
* @param {Object} imgPath
* 圖像 base64 編碼字符串或圖像可訪問路徑
* @param {Object} compParamObj
* 壓縮參數，compParamObj 對象的屬性：width-寬，height-高，
* ratio(0-1)-寬高壓縮率，quality(0-1)-圖像質量系數
* @param {Object} maxSize
* 指定壓縮后的文件大小，單位：字節(jié)
* @param {Object} callback
* 回調函數有一個參數，base64 的字符串數據
* @param {Object} left
* 二分遞歸查找 left
* @param {Object} right
* 二分遞歸查找 right
* @param {Object} oQuality
* 初始圖像質量系數
*/
function compressedImage(
imgPath,
compParamObj,
maxSize,
callback,
left = 0,
right = null,
oQuality = null
) {
let img = new Image();
img.src = imgPath;
img.onload = function () {
const _this = this;
// 默認按比例壓縮
let w = _this.width * (compParamObj?.ratio || 1),
h = _this.height * (compParamObj?.ratio || 1),
scale = w / h;
w = compParamObj.width || w;
h = (compParamObj.height && compParamObj.height * (w / scale)) || h;
// 生成 canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
ctx.drawImage(_this, 0, 0, w, h);
// 圖像質量系數，默認圖片質量為 0.8
let quality = 0.8;
if (
compParamObj.quality &&
compParamObj.quality > 0 &&
compParamObj.quality <= 1
) {
quality = compParamObj.quality;
}
// quality 值越小，所繪制出的圖像越模糊
let newBase64Image = canvas.toDataURL("image/jpeg", quality);
let fileSize = getBase64ImageSize(newBase64Image);
if (left <= right) {
if (oQuality === null) {
oQuality = quality;
}
const qualityArr = [],
step = 0.01;
for (let i = step; i <= oQuality; i += step) {
qualityArr.push(parseFloat(i));
}
if (right === null) {
right = qualityArr.length;
}
const mid = Math.floor((left + right) / 2);
if (fileSize > maxSize) {
compressedImage(
imgPath,
{
quality: qualityArr[mid],
// 設置寬高壓縮率對圖像進行寬高壓縮，降低圖像被壓縮后出現彩虹斑的情況
ratio: 0.5,
},
maxSize,
callback,
left,
mid - 1,
oQuality
);
} else {
compressedImage(
imgPath,
{
quality: qualityArr[mid],
// 設置寬高壓縮率對圖像進行寬高壓縮，降低圖像被壓縮后出現彩虹斑的情況
ratio: 0.5,
},
maxSize,
callback,
mid + 1,
right,
oQuality
);
}
return;
}
if (!!callback) {
// 回調函數返回壓縮后的 base64 圖像
callback(newBase64Image);
}
};
}
上述代碼中，當只通過圖像質量系數 oQuality 對圖像進行壓縮時，圖像文件越大，被壓縮后出現的彩虹斑的概率越高，因此，為降低圖像被壓縮后出現彩虹斑的情況，同時設置寬高壓縮率對圖像寬高進行壓縮。
三、使用 canvas 和 web workers 來實現圖像壓縮
JavaScript 的 Web Workers API 允許在瀏覽器中創(chuàng)建多個線程，可以在后臺線程中執(zhí)行 JavaScript 代碼，而不會影響主線程的響應性。因此，可以使用 Web Workers 來執(zhí)行計算密集型任務，例如圖像壓縮。
下面是一個簡單的示例代碼，展示了如何使用 Web Workers 在后臺線程中執(zhí)行圖像壓縮：
// 在主線程中
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;
let newBase64Image, resultBlob;
do {
// 該方法是異步獲取 Blob 的，導致無法及時獲取 resultBlob.size
// canvas.toBlob(function (blob) {
// resultBlob = blob;
// self.postMessage(resultBlob);
// }, 'image/jpeg', quality);
newBase64Image = canvas.toDataURL("image/jpeg", quality);
resultBlob = base64ToBlob(newBase64Image);
self.postMessage(resultBlob);
quality -= 0.1;
} while (resultBlob.size > maxSize && quality > 0.1);
};
};
// 將 base64 轉換為 Blob
function base64ToBlob(base64) {
var arr = base64.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,
});
}
這個示例代碼中，在主線程中通過創(chuàng)建一個 Worker 對象并加載一個 worker.js 文件來啟動一個后臺線程. 在 worker.js 中，我們在 onmessage 中定義了圖像壓縮的邏輯，并使用 postMessage 來將壓縮后的圖像發(fā)送回主線程。這樣做的優(yōu)點在于，將圖像壓縮的計算密集型任務放到了后臺線程中進行，可以保證主線程的響應性不會受到影響。這樣能夠避免因為計算密集型任務而導致頁面卡頓或延遲。
需要注意的是，Web Workers 不能直接訪問 DOM，所以需要使用 postMessage 在主線程和后臺線程之間傳遞數據。
這只是一個簡單的示例，實際應用中可能需要根據需求進行更多的定制。
四、使用第三方庫進行圖像壓縮
在 JavaScript 中進行圖像壓縮有一些第三方庫可供使用，比如：
- canvas-toBlob.js：在不支持 toBlob() 的瀏覽器中提供對 toBlob() 的支持。
- lwip：一個 JavaScript 的圖像處理庫，可以實現圖像的壓縮，旋轉，裁剪等操作，可在 Node.js 環(huán)境中使用。
- browser-image-resizer：基于 canvas 和 web workers 的 JavaScript 圖像壓縮庫。
- jpeg-js：使用 JavaScript 實現的 JPEG 壓縮庫，可以在瀏覽器或 Node.js 環(huán)境中使用。
使用這些庫進行壓縮時需要注意的是，它們在性能上可能有所限制。對于大型圖像，壓縮可能需要相當長的時間?？赡苄枰谟脩羯蟼鲌D像時顯示加載條或消息，以提醒用戶正在進行壓縮。
五、使用 Canvas 進行圖像壓縮時，出現彩虹斑問題
在使用 Canvas 進行圖像壓縮時，可能會出現彩虹斑問題，這通常是由于壓縮算法中使用了量化方法而導致的，量化會使顏色變得不連續(xù)，從而產生彩虹斑。
以下是一些可以嘗試的解決方法：
調整圖像寬高，嘗試對圖像的寬高進行等比例縮放。
使用 WebP 格式進行壓縮。WebP 格式使用有損壓縮，但可以在保持較高質量的同時減少文件大小。
嘗試使用更高質量的壓縮算法。如果正在使用默認的算法，請嘗試使用更高質量的算法進行壓縮。
調整顏色空間。嘗試將顏色空間更改為 sRGB，這可以減少量化的影響。
減少圖像的色深。嘗試將圖像的色深降低到較低的級別，這可以減少量化的影響。
使用 dithering（抖動）技術。抖動技術可以在顏色變化較大的區(qū)域添加噪聲，從而減少彩虹斑的出現。
增加圖像的分辨率。嘗試將圖像的分辨率增加到較高的級別，這可以減少量化的影響。
調整圖像的亮度和對比度。在某些情況下，調整圖像的亮度和對比度可以減少彩虹斑的出現。
在繪制到 Canvas 之前先進行色彩空間轉換。例如，將圖像轉換為 YUV 色彩空間，這可以減少量化引起的問題。
需要注意的是，以上解決方法并不一定適用于所有情況，具體取決于圖像的特點和要求。使用這些方法可能會影響圖像的視覺質量，需要在權衡文件大小和視覺質量之間做出選擇。
六、使用 Canvas 進行圖像壓縮時，出現傳入不同的圖像質量系數 quality，生成的 base64 字符串卻不變的情況
通過上述壓縮方法進行圖像壓縮時，在 quality 參數一定范圍內，以 0.05 遞減 quality 參數，同時對 quality 進行保留兩位小數處理后再傳入 toDataURL 方法進行壓縮時，存在生成的 base64 的大小一直不變，也就是 base64 字符串不變，產生該現象具體原因不詳。
現象如圖：
- 對 quality 進行保留兩位小數處理
說明：圖中 base64 碼只取前 1000 個字符作為對比。
- 未對 quality 進行小數處理
總結
到此這篇關于如何使用JavaScript對圖像進行壓縮的文章就介紹到這了,更多相關js對圖像壓縮內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄猨s 數字、字符串、布爾值的轉換方法(必看)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
用正則xmlHttp實現的偷(轉)...2007-01-01
這篇文章主要介紹了微信小程序使用map組件實現路線規(guī)劃功能,結合具體實例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關操作技巧,需要的朋友可以參考下2019-01-01
本文主要介紹了通用webpack多頁面自動導入方案，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了JS實現根據文件字節(jié)數返回文件大小的方法,涉及javascript數值計算與字符串操作相關技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Js數組對象如何根據多個key值進行分類,每周從 npm 下載?lodash.groupBy?的次數在 150 萬到 200 萬之間，很高興看到 JavaScript 填補了這些空白，讓我們的工作變得更加輕松，需要的朋友可以參考下2024-02-02
javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時，發(fā)現IE與FF在動態(tài)加載Html元素時，有一些差別，一起過來看看下面的代碼吧2014-01-01
這篇文章主要介紹了微信小程序 參數傳遞實例代碼的相關資料,需要的朋友可以參考下2017-03-03
IE6中鏈接A的href為javascript協議時不在當前頁面跳轉
IE6中當鏈接A的href為javascript協議時不能在當前頁面跳轉，本例給出有效的解決方法，大家不妨參考下2014-06-06
這篇文章主要介紹了javascript實現禁止右鍵和F12查看源代碼的代碼,需要的朋友可以參考下2014-12-12