如何使用js对图像进行压缩

这篇具有很好参考价值的文章主要介绍了如何使用js对图像进行压缩。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。

使用 canvas,可以将图像绘制到 canvas 上,然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。

使用 web workers,可以在后台执行图像压缩,以避免阻塞 UI 线程。

但是在浏览器环境下,JavaScript 因为安全限制,不能操作本地文件,所以一般使用在浏览器端上传图片,使用 JavaScript 进行压缩处理,上传到服务端,后续处理。

一、简单压缩

使用 JavaScript 和 canvas 压缩图像可以使用 canvas 的 drawImage() 方法将图像绘制到 canvas 上,然后使用 toDataURL() 方法将图像转换为 Data URL 形式。Data URL 是一种将数据嵌入 URL 的格式,可以在不需要网络请求的情况下直接在浏览器中加载图像。

在调用 toDataURL() 方法时,可以使用第二个参数来指定图像质量。该参数的值应该在 0 到 1 之间,表示图像质量的百分比。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() 方法将图像绘制到 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 循环来不断地减小图像质量直到图像的文件大小符合限制为止。最后它生成了一个 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() 的浏览器中提供对 toBlob() 的支持。
  • 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 参数,同时对 quality 进行保留两位小数处理后再传入 toDataURL 方法进行压缩时,存在生成的 base64 的大小一直不变,也就是 base64 字符串不变,产生该现象具体原因不详。

现象如图:

  • 对 quality 进行保留两位小数处理

js上传图片压缩,前端技术,javascript,开发语言,ecmascript

说明:图中 base64 码只取前 1000 个字符作为对比。

  • 未对 quality 进行小数处理

js上传图片压缩,前端技术,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-677684.html

到了这里,关于如何使用js对图像进行压缩的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩

    前端Vue图片上传组件支持单个文件多个文件上传 自定义上传数量 预览删除图片 图片压缩, 下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13099 效果图如下: 组件初始化 使用方法 HTML代码部分

    2024年02月09日
    浏览(75)
  • 【vue3】前端上传图片的格式大小限制和压缩

    目录 前言 对上传图片进行格式大小限制 压缩上传图片 上篇文章中研究了如何使用双token机制,在此篇中就暴露了一些问题:当accesstoken过期后,直到拿到最终想要得到的数据,期间需要经历三次请求——第一次请求,拿到accesstoken过期的消息——第二次携带refreshtoken发起请求

    2024年02月06日
    浏览(75)
  • 前端 JS 压缩图片的思路(附源码)

    相信大家都做过图片上传相关的功能,在图片上传的过程中,不知道大家有没有考虑过文件体积的问题,如果我们直接将原图片上传,可以图片体积比较大,一是上传速度较慢,二是前端进行渲染时速度也比较慢,比较影响客户的体验感。所以在不影响清晰度的情况下,前端

    2024年04月27日
    浏览(31)
  • 如何使用阿里云OSS进行前端直传以及分片上传

    在使用阿里云OSS进行前端直传时,首先我们需要去阿里云官网注册自己的存储桶,然后申请相关的accessKeyId和accessKeySecret,然后新建一个桶,为这个桶命名以及选择对应的地区。 然后可以根据自己的业务,封装对应的组件,以下是根据我自己的项目,所封装的上传组件,所用

    2024年02月21日
    浏览(45)
  • 前端JS 展示上传图片缩略图(本地图片读取)

    需求: 点击上传图片按钮,选择图片以后,不请求后端接口,直接将图片展示在缩略图中。 解决方案: 使用 FileReader 和 FileReader 中的 readAsDataURL 方法。 第一步 从 input[type=“file”] (上传文件标签) 里面拿到 file 数据,类似下图 第二步 拿到file数据后,执行下面代码 效果展示

    2024年02月15日
    浏览(51)
  • Java 中如何对图片进行压缩处理

    问题背景 图片过大时,会造成页面卡顿甚至于报错,而且现在页面,接口,很多地儿都有报文传输的最大限制要求,另外不知道各位有没有遇到过页面渲染比较大的 base64 图片时,会非常的卡顿。所以,我们必须对用户上传的原始图片进行压缩处理。 为何图片经过 base64 编码

    2024年02月12日
    浏览(34)
  • Baumer工业相机堡盟工业相机如何通过NEOAPI SDK使用.NET框架的Encoder方法进行图像压缩保存(C#)

    Baumer工业相机堡盟相机是一种高性能、高质量的工业相机,可用于各种应用场景,如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能,可以实时传输高分辨率图像。此外,该相机还具有快速数据传输、低功耗、易于集成以及高度可扩

    2024年04月22日
    浏览(49)
  • fabric.js 组件 图片上传裁剪并进行自定义区域标记

    目录 0. 前言 1. 安装fabric与引入 2. fabric组件的使用 3. 属性相关设置 4. 初始化加载 4. 方法 5. 全代码 利用fabric组件,实现图片上传、图片”裁剪“、自定义的区域标记一系列操作 先放一张效果图吧👇 我用的是全局引入方式,视情况调整  先放一个fabric.js API地址☞Api | Fabric中

    2024年01月22日
    浏览(91)
  • 使用Opencv对图像进行压缩和解压缩

      最近在一个项目中需要将工业相机采集到的图像通过jsonrpc进行传输,一开始没进行压缩,传输的速度很慢,相机分辨率是2592×1944,单通道,这么一算一次要传输的数据量大小是2592×1944×1=5,038,848字节,500多万的字节,通过opencv自带 imencode 和 imdecode 两个函数,将图像进行

    2024年02月04日
    浏览(52)
  • 使用python对图片进行压缩

    对于图片,强行被定义高和宽会变形,我们希望图片被改变大小后,比例保持不变,完成对图片的压缩。 1.pillow : pip install pillow -i https://pypi.douban.com/simple 2. os : 连接文件,并获取文件夹下的文件名 获取picture文件下的相关图片的路径,将路径放到列表里面进行存储 使用Image模

    2024年02月13日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包