js 压缩图片大小（JavaScript 图像压缩）

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 对象
  
  
  
  
  ，它可以被用来更新页面上的图像或者存储到服务器上
 

 

 

 

 
。

递归方式可避免循环导致压缩处理过程中
 


 


 


 


 

，页面提示无法显示的问题

// 计算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 在主线程和后台线程之间传递数据
 
 
 
 
 
 
 
 
 
 。

这只是一个简单的示例 

 

 

 

 

，实际应用中可能需要根据需求进行更多的定制














。