Base64图片压缩全面指南

KWUH • 2024-10-04 00:18 • 编程

一、压缩图片的必要性

高清图片往往占用较大的存储空间和网络传输带宽，大幅度拖慢网页打开速度，影响用户体验。针对这一问题，压缩图片成为了良好的解决方案。

二、Base64压缩基础知识

Base64作为一种编码方法，可以将二进制数据转化成简单易读的字符串形式。因此，我们可以将图片转化成Base64编码，从而实现图片压缩。

Base64压缩原理：将图片数据编码成Base64字符串，再通过去除一些特殊字符和将Base64字符串中的连续空格替换为单个空格来压缩图片。

三、Base64图片压缩实现

1、将图片转成Base64格式

使用JavaScript可以方便的将图片数据解析成Base64编码。

/*方法一*/
function getImageBase64(file){
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(){
    let base64 = this.result;
    //进行压缩
    compressImage(base64);
  }
}

/*方法二*/
function getImageBase64(img){
  let canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(img,0,0,img.width,img.height);
  let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  let dataURL = canvas.toDataURL("image/"+ext);
  //进行压缩
  compressImage(dataURL);
}

2、压缩Base64格式

通过去除Base64编码中的一些字符和空格来达到压缩的目的。

function compressImage(base64){
  let str = base64.replace(new RegExp("=(?:[A-Za-z0-9+/])*", "g"), "");
  str = str.replace(/([^\0]{75})/g, "$1\n");
  str = str.replace(/\s/g, '');
  //最大长度为1000000
  if(str.length>=1000000){
    alert('图片过大，请重新上传');
    return;
  }
  //获取压缩后的Base64编码
  console.log(str);
}

3、测试压缩效果

压缩后的图片可以与原始图片进行比较，以此来判断压缩效果。

let img1 = new Image();
img1.onload = function () {
  getImageBase64(img1);
  console.log('img1宽度：'+img1.width);
  console.log('img1高度：'+img1.height);
}
img1.src = '原始图片地址';

let img2 = new Image();
img2.onload = function () {
  getImageBase64(img2);
  console.log('img2宽度：'+img2.width);
  console.log('img2高度：'+img2.height);
}
img2.src = '压缩后的图片地址';

四、Base64图片压缩的优点和缺点

1、优点

基于Base64格式的图片压缩，可以通过JavaScript等前端技术实现，减少后端服务器的压力，提升前端性能；Base64编码的图片保存在HTML文档中，避免网络请求，减少了网络带宽的消耗。

2、缺点

Base64编码的图片体积会增加33%，因此需要考虑是否使用Base64格式进行压缩。

五、Base64图片压缩的适用场景

Base64图片压缩适用于需要在前端进行图片处理的地方，如图片上传、图像预览、拖拽上传等场景。

六、总结

通过本文的介绍，我们了解了Base64图片压缩的原理、实现方法和适用场景。希望能够帮助读者在实际开发中更好的实现图片压缩。

原创文章，作者：KWUH，如若转载，请注明出处：https://www.506064.com/n/137884.html