本文详解JavaScript前端图像压缩方案，涵盖Canvas基础压缩、指定大小循环与二分查找算法、Web Workers异步处理及第三方库使用。重点解析压缩后出现的彩虹斑成因与规避策略，以及quality参数失效等常见异常现象，提供完整代码示例与优化建议。
在 JavaScript 中，可以通过 Canvas 和 Web Workers 技术实现图像压缩功能。
利用 Canvas 时，先将图像绘制到画布上，随后调用 toBlob() 或 toDataURL() 方法导出为不同格式的图像。通过指定质量参数，即可控制压缩程度。
借助 Web Workers，可将图像压缩任务移至后台线程执行，从而避免阻塞浏览器的主 UI 线程，提升页面响应速度。
受限于浏览器安全策略，JavaScript 无法直接读写本地文件系统。因此，常见的做法是前端接收用户上传的图片，利用 JavaScript 进行压缩处理后，再上传至服务器进行后续存储或处理。
一、简单压缩
结合 JavaScript 与 Canvas 进行简单图像压缩，核心步骤是调用 drawImage() 将图像渲染至 Canvas，再通过 toDataURL() 转换为 Data URL 格式。Data URL 允许将图像数据直接嵌入 URL 中，无需额外网络请求即可在浏览器内加载显示。
调用 toDataURL() 时，可通过第二个参数设定图像质量。该参数取值范围为 0 至 1，数值越低代表压缩率越高、画质越差，数值越高则画质越好。
以下代码展示了基于 Canvas 和 JavaScript 实现图像压缩的基本流程：
// 创建 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、通过循环遍历由大到小的图像质量系数来确定合适的系数
首先，利用 Canvas 的 drawImage() 方法将图像绘制到画布上，并配合 base64ToBlob() 工具函数将 Base64 格式的图像数据转换为 Blob 对象。
接着，检查生成的 Blob 对象大小是否超出预设的最大限制。若超出，则降低图像质量参数并重新压缩，直至文件大小符合限制要求。
以下示例代码演示了如何将 Base64 图像压缩至指定的最大文件大小：
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 循环不断降低图像质量，直到文件大小满足限制。最终生成的 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);
// 大小单位：字节
return (str.length * 0.75).toFixed(2);
}
此改进方案由 @Wuya 提出建议。
2.、方法二：递归代替迭代(do-while 循环)
采用递归方式可有效避免迭代过程中因耗时过长导致页面提示组件无法及时显示的问题。
2.1、递归遍历递减图像质量系数确定合适的系数
// 计算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 _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);
// 大小单位：字节
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
* 指定压缩后的文件大小，单位：字节
* @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 允许在浏览器中创建多个线程，可在后台线程执行 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;
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,
});
}
示例中，主线程通过创建 Worker 对象并加载 worker.js 文件启动后台线程。在 worker.js 中，通过 onmessage 定义压缩逻辑，并利用 postMessage 将压缩后的图像传回主线程。此举将计算密集型任务移至后台，确保主线程响应性，避免页面卡顿或延迟。
需注意，Web Workers 无法直接访问 DOM，因此需通过 postMessage 在主线程与后台线程间传递数据。
此仅为简单示例，实际应用中需根据具体需求进行更多定制开发。
四、使用第三方库进行图像压缩
JavaScript 生态中存在多个用于图像压缩的第三方库，例如：
- canvas-toBlob.js：为不支持 toBlob() 的浏览器提供 polyfill 支持。
- lwip：一个 JavaScript 图像处理库，支持压缩、旋转、裁剪等操作，可在 Node.js 环境中运行。
- browser-image-resizer：基于 Canvas 和 Web Workers 的 JavaScript 图像压缩库。
- jpeg-js：使用 JavaScript 实现的 JPEG 压缩库，适用于浏览器或 Node.js 环境。
使用这些库时需注意性能限制。处理大型图像时，压缩过程可能耗时较长。建议在用户上传图像时显示加载条或提示信息，以告知用户压缩正在进行中。
五、使用 Canvas 进行图像压缩时，出现彩虹斑问题
使用 Canvas 压缩图像时，可能出现彩虹斑现象。这通常源于压缩算法中的量化处理，导致颜色过渡不连续，从而产生视觉上的条纹或斑点。
以下是一些可能的解决思路：
调整图像宽高，尝试对图像进行等比例缩放。
使用 WebP 格式进行压缩。WebP 采用有损压缩，可在保持较高画质的同时显著减小文件大小。
尝试使用更高质量的压缩算法。若当前使用默认算法，可尝试切换至更高质量的算法。
调整颜色空间。尝试将颜色空间更改为 sRGB，这有助于减少量化带来的负面影响。
减少图像的色深。尝试将图像色深降低，这有助于减轻量化影响。
使用 dithering（抖动）技术。在颜色变化剧烈的区域添加噪声，可有效减少彩虹斑的出现。
增加图像的分辨率。尝试提高图像分辨率，这有助于缓解量化问题。
调整图像的亮度和对比度。在某些情况下，调整亮度和对比度可减少彩虹斑。
在绘制到 Canvas 之前先进行色彩空间转换。例如，将图像转换为 YUV 色彩空间，这有助于减少量化引起的问题。
需注意，上述方法并非适用于所有场景，具体效果取决于图像特性与需求。使用这些方法可能会影响图像的视觉质量，需在文件大小与视觉质量之间做出权衡。
六、使用 Canvas 进行图像压缩时，出现传入不同的图像质量系数 quality，生成的 base64 字符串却不变的情况
通过上述压缩方法处理图像时，在 quality 参数的一定范围内，以 0.05 为步长递减 quality 参数，并在传入 toDataURL 方法前对 quality 保留两位小数处理，可能出现生成的 base64 字符串大小及内容均不变的现象。该现象的具体成因尚不明确。
现象如图：
- 对 quality 进行保留两位小数处理
说明：图中 base64 码仅截取前 1000 个字符进行对比。
- 未对 quality 进行小数处理
总结
本文介绍了如何使用 JavaScript 对图像进行压缩。如需了解更多关于 JS 图像压缩的内容，请搜索本站往期文章或继续阅读后续相关文章。感谢大家的支持！