LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]【JavaScript】纯JS代码在线实时压缩图片

admin
2023年5月6日 11:57 本文热度 783

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 压缩图像的示例代码:

1.  // 获取 canvas 元素

2.  var canvas = document.getElementById('canvas');

3.  var ctx = canvas.getContext('2d');

4.   

5.  // 创建 Image 对象

6.  var img = new Image();

7.  img.src = 'image.jpg';

8.  img.onload = function() {

9.    // 绘制图像到 canvas

10.  canvas.width = img.width;

11.  canvas.height = img.height;

12.  ctx.drawImage(img, 0, 0, img.width, img.height);

13. 

14.  // 使用 toDataURL 方法压缩图像

15.  var dataUrl = canvas.toDataURL('image/jpeg', 0.5);

16. 

17.  // 使用新的 Data URL 更新图像

18.  img.src = dataUrl;

19.}


这个例子中,图片会使用 jpeg 格式压缩,质量为50%,压缩后的图片会被重新赋值回img.src里,可以改变其他参数得到不同的压缩效果

二、使用canvas 将base64 图像压缩到指定文件大小以内

1、 方法一

首先使用 atob() 函数将 base64 图像数据解码为二进制字符串,然后创建一个新的 Blob 对象,并使用 FileReader 读取 Blob 对象。

接下来,使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上,并使用 canvas.toBlob() 方法将图像转换为 Blob 对象。

最后,检查生成的 Blob 的大小是否超过指定的最大大小。 如果超过,使用不同的图像质量再次压缩图像,直到它的大小小于给定的最大大小为止.

下面是一个示例代码:

1.  var maxSize = 100 * 1024; // 最大文件大小为100KB

2.  var img = new Image();

3.  img.src = base64Image;

4.  img.onload = function () {

5.      var canvas = document.createElement('canvas');

6.      var ctx = canvas.getContext('2d');

7.      var width = img.width;

8.      var height = img.height;

9.      canvas.width = width;

10.    canvas.height = height;

11.    ctx.drawImage(img, 0, 0, width, height);

12.    var quality = 0.8;

13.    var resultBlob;

14.    do {

15.        canvas.toBlob(function (blob) {

16.            resultBlob = blob;

17.        }, 'image/jpeg', quality);

18.        quality -= 0.1;

19.    } while (resultBlob.size > maxSize && quality > 0.1);

20.    // do something with resultBlob, like create a new image from it or save it.

21.}


这个示例代码使用 canvas 将 base64 图像压缩到指定的最大文件大小以内。它使用了一个 do-while 循环来不断地减小图像质量直到图像的文件大小符合限制为止。最后它生成了一个 resultBlob 对象,它可以被用来更新页面上的图像或者存储到服务器上。

值得注意的是,这个示例代码中进行图像压缩时的质量是每次减少0.1,如果压缩后的图像的文件大小仍然超出限制,可能需要调整这个减少量,或者考虑其他压缩策略,比如更改图像的分辨率等。在这个例子中压缩文件大小是每次只减少0.1,这样可能会花费很长时间,在实际应用中需要根据需求来进行调整。


2、方法二

递归方式可避免循环导致压缩处理过程中,页面提示无法显示的问题

1.  // 计算base64编码图片大小

2.  function getBase64ImageSize(base64) {

3.      const indexBase64 = base64.indexOf('base64,');

4.      if (indexBase64 < 0) return -1;

5.      const str = base64.substr(indexBase64 + 6);

6.      // 大小单位:字节

7.      return (str.length * 0.75).toFixed(2);

8.  }

9.   

10./**

11. *   图像压缩,默认同比例压缩

12. * @param {Object} imgPath

13. *   图像base64编码字符串或图像可访问路径

14. * @param {Object} obj

15. *   obj 对象 width height quality(0-1)

16. * @param {Object} maxSize

17. *   指定压缩后的文件大小,单位:字节

18. * @param {Object} callback

19. *   回调函数有一个参数,base64的字符串数据

20. */

21.function compressedImage(path, obj, maxSize, callback) {

22.    let img = new Image();

23.    img.src = imgPath;

24.    img.onload = function () {

25.        const that = this;

26.        // 默认按比例压缩

27.        let w = that.width,

28.            h = that.height,

29.            scale = w / h;

30.        w = obj.width || w;

31.        h = obj.height && obj.height * (w / scale) || h;

32.        // 生成canvas

33.        let canvas = document.createElement('canvas');

34.        let ctx = canvas.getContext('2d');

35.

36.        canvas.width = w;

37.        canvas.height = h;

38.

39.        ctx.drawImage(that, 0, 0, w, h);

40.        // 图像质量,默认图片质量为0.8

41.        let quality = 0.8;

42.        if (obj.quality && obj.quality > 0 && obj.quality <= 1) {

43.            quality = obj.quality;

44.        }

45.        // quality值越小,所绘制出的图像越模糊

46.        let newBase64Image = canvas.toDataURL('image/jpeg', quality);

47.

48.        let fileSize = getBase64ImageSize(newBase64Image);

49.        if (fileSize > maxSize && quality > 0.01) {

50.            if (quality > 0.05) {

51.                quality = quality - 0.05;

52.            } else {

53.                quality = 0.01;

54.            }

55.            compressedImage(imgPath, {

56.                quality: quality

57.            }, maxSize, callback);

58.            return;

59.        }

60.

61.        // 回调函数返回压缩后的 base64图像

62.        callback(newBase64Image);

63.    }

64.}


三、使用 canvas 和 web workers 来实现图像压缩

Javascript 的 Web Workers API 允许在浏览器中创建多个线程,可以在后台线程中执行 Javascript 代码,而不会影响主线程的响应性。因此,可以使用 Web Workers 来执行计算密集型任务,例如图像压缩。

下面是一个简单的示例代码,展示了如何使用 Web Workers 在后台线程中执行图像压缩:

1.  // 在主线程中

2.  var worker = new Worker('worker.js');

3.  worker.onmessage = function(e) {

4.      var compressedImage = e.data;

5.      // do something with compressedImage

6.  };

7.  worker.postMessage({

8.      image: base64Image,

9.      maxSize: 100 * 1024 // 最大文件大小为100KB

10.});


1.  // worker.js

2.  self.onmessage = function(e) {

3.      var image = e.data.image;

4.      var maxSize = e.data.maxSize;

5.      var img = new Image();

6.      img.src = image;

7.      img.onload = function() {

8.          var canvas = document.createElement('canvas');

9.          var ctx = canvas.getContext('2d');

10.        var width = img.width;

11.        var height = img.height;

12.        canvas.width = width;

13.        canvas.height = height;

14.        ctx.drawImage(img, 0, 0, width, height);

15.        var quality = 0.8;

16.        var resultBlob;

17.        do {

18.            canvas.toBlob(function(blob) {

19.                resultBlob = blob;

20.                self.postMessage(resultBlob);

21.            }, 'image/jpeg', quality);

22.            quality -= 0.1;

23.        } while (resultBlob.size > maxSize && quality > 0.1);

24.    }

25.};


这个示例代码中,在主线程中通过创建一个 Worker 对象并加载一个 worker.js 文件来启动一个后台线程. 在 worker.js 中,我们在 onmessage 中定义了图像压缩的逻辑,并使用 postMessage 来将压缩后的图像发送回主线程。这样做的优点在于,将图像压缩的计算密集型任务放到了后台线程中进行,可以保证主线程的响应性不会受到影响。这样能够避免因为计算密集型任务而导致页面卡顿或延迟。

需要注意的是,Web Workers 不能直接访问 DOM,所以需要使用 postMessage 在主线程和后台线程之间传递数据。

这只是一个简单的示例,实际应用中可能需要根据需求进行更多的定制。


该文章在 2023/5/6 12:15:28 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved