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