一、压缩图片的必要性
高清图片往往占用较大的存储空间和网络传输带宽,大幅度拖慢网页打开速度,影响用户体验。针对这一问题,压缩图片成为了良好的解决方案。
二、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图片压缩的原理、实现方法和适用场景。希望能够帮助读者在实际开发中更好的实现图片压缩。