通过JavaScript实现图片压缩
目录
压缩图片的原理👨🚀👨🚀
其实我们实现压缩的本质原理是通过使用canvas中的来进行图片的压缩操作，但是中间需要经过一系列的加工处理，下面我将详细的讲解细节的操作：
const init=()=>{
const selectPicture = document.querySelector("#selectImg");
const originalPreview = document.querySelector("#imgPreview");
const compressPreview = document.querySelector("#compressImg");
// 绑定点击事件
function BindEvent() {
selectPicture.addEventListener("change", (e) => {
const imgFiles = e.target.files[0];
console.log(e.target.files[0]);
fn(imgFiles);
});
}
BindEvent();
.....剩余内容在下面
}
init()
FileReader对象 🍊🍊
首先我们先了解一下FileReader这个对象
简单的来讲就是FileReader这个对象允许应用程序异步的读取计算机的文件内容，其中这个对象提供了一些方法，我们等会会用到它提供的一些方法。
// 读取图片原始的base64
const fn = (imgFiles) => {
const render = new FileReader();
render.readAsDataURL(imgFiles);
render.onload = () => {
// console.log(render.result);
// 将图片压缩处理
originalPreview.setAttribute("src", render.result);
imageCompression(render.result, 40, "image/jpg");
};
// 将图片转化为base64形式
};
在这个函数中我们通过调用这个方法，这个方法可以用来读取指定的文件，在读取完成之后在render上面的 result属性将包含一个URL格式的字符串 （base64编码） 以表示所读取文件的内容。
我们在使用 方法的一般流程如下：
我们在这个函数中将原始图片通过setAttribute方法给src属性设置值render.result（base64）
在这里我们接下来就需要调用压缩图片的函数
首先这个函数接收三个值分别是:
图片压缩函数⛹️♀️⛹️♀️
// 压缩函数
const imageCompression = (imageURL, quality, imageType) => {
let canvas = document.createElement("canvas");
let img = document.createElement("img");
img.src = imageURL;
img.onload = () => {
// 在实际的工作中，根据业务来计算相应的宽度，这里只是进行一个演示的小demo
canvas.width = 300;
canvas.height = 300;
// 获取上下文
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, 300, 300);
// 将图片压缩
let compressImage = canvas.toDataURL(imageType, quality / 100);
console.log(compressImage);
compressPreview.setAttribute("src", compressImage);
};
};
压缩前后的图片进行对比：🚴♀🚴♀
大小的改变：
片大小上缩小了3倍。这节省了空间，在一些显示图片很多的网站就可以使用这种压缩，在页面展示的时候可以显示这种压缩之后的图片，当点击进去之后可以显示原本没有压缩的图片，这样就节省了很多的性能。
但是压缩之后的图片确实没有之前美观，所以这是有舍有得，我们可以在具体的情景中灵活的使用。
总结🔑🔑
这次通过对图片压缩的学习，是自己有了解学习了之前所不知道的知识，比如图片的存储形式以及FileReader之类的，使自己收获很多。
以上就是通过JavaScript实现图片压缩的详细内容，更多关于JavaScript压缩图片的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: