JS图片压缩的简单实现
作者：1in
本文主要介绍了JS图片压缩的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言关于图片压缩这一般都是由后端来完成~，但是前端掌握这项技能也是必不可少的。
图片压缩思路
我们读取源图片之后，利用canvas画板画出源图片，然后利用toDataURL这个API转换成base64的格式
需要FileReade这个对象去reader图片，并且利用reader.onload这个监听事件完成图片压缩。
源码
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hide{
display: none;
}
.show{
display: initial;
}
.img-preview{
width: 300px;
}
</style>
</head>
<body>
<p>
<input type="file" id="imgFileSelector" value="请选择图片">
</p>
<p>
<img id="originImgPreview" class="img-preview hide">
</p>
<p>
<img id="compressedImgPreview" class="img-preview hide">
</p>
<script src="./index.js" type="module" ></script>
</body>
</html>因为img元素既不是块级元素也不是行内级元素，所以添加类.show时需要设置为display:initial。
index.js文件
//获取HTML元素
const oImageFileSelector=document.querySelector("#imgFileSelector")
const oOriginImgPreview=document.querySelector("#originImgPreview")
const oCompressedImgPreview=document.querySelector("#compressedImgPreview")
//创建reader对象
const reader=new FileReader()
let imgFile=null
let quality=90
let compressedImgSrc=""
//构建IMG_TYPES表
const IMG_TYPES={
"image/jpeg":"image/jepg",
"image/png":"image/png",
"image/gif":"image/gif",
"image/jpg":"image/jpg"
}
function init (){
bindEvent()
}
//构建绑定事件函数
function bindEvent(){
oImageFileSelector.addEventListener("change",handleFileSelectorChange,false)
}
function handleFileSelectorChange(e){
console.log(1)
imgFile=e.target.files[0]
console.log(imgFile)
//判断imgFile是否存在并且imgFile的类型是否为IMG_TYPES表中的类型
if(!imgFile || !IMG_TYPES[imgFile.type] ){
alert("请选择正确格式的图片")
setImgFileEmpty()
return
}
setImgPreview(imgFile)
}
//初始化imgFile
function setImgFileEmpty(){
oImageFileSelector.value=""
imgFile=null
setPreviewVisible(oOriginImgPreview,false)
setPreviewVisible(oCompressedImgPreview,false)
}
function setImgPreview(imgFile){
if( imgFile instanceof File){
reader.onload=async ()=>{
const originImgSrc=reader.result
const compressedImgSrc=await createCompressedImage({
imgSrc:originImgSrc,
type:imgFile.type
})
console.log(compressedImgSrc)
console.log("未压缩",originImgSrc.length)
console.log("压缩后",compressedImgSrc.length)
oOriginImgPreview.src=originImgSrc
setPreviewVisible(oOriginImgPreview,true)
oCompressedImgPreview.src=compressedImgSrc
setPreviewVisible(oCompressedImgPreview,true)
}
reader.readAsDataURL(imgFile)
}
}
function createCompressedImage ({
imgSrc,
type
}){
const oCan=document.createElement("canvas")
const oImg=document.createElement("img")
const context=oCan.getContext("2d")
oImg.src=imgSrc
//因为通过onload事件触发回调函数，所以需要Promise的resolve回调传回值并接收
return new Promise((resolve)=>{
oImg.onload=()=>{
const imageWidth=oImg.width
const imageHeight=oImg.height
oCan.width=imageWidth
oCan.height=imageHeight
//利用canvas的drawImage函数去画出源图像
context.drawImage(oImg,0,0,imageWidth,imageHeight)
const compressedImgSrc = doCompress(oCan, type, imgSrc)
resolve(compressedImgSrc)
}
})
}
//创建递归函数，如果压缩的文件大小大于源文件就继续压缩
function doCompress (canvas,type,imgSrc){
compressedImgSrc=canvas.toDataURL(type,quality/100)
if(compressedImgSrc.length >=imgSrc.length && quality>10){
quality-=10
doCompress(canvas,type,imgSrc)
}
return compressedImgSrc
}
//是否显示img元素
function setPreviewVisible (node,visible){
switch(visible){
case true:
node.classList.remove("hide")
node.classList.add("show")
break
case false:
node.classList.remove("show")
node.classList.add("hide")
break
default:
break
}
}
init()需要注意的是，我们是通过oImg.onload来执行压缩代码的，所以我们需要用Promise的resolve回调来传出值，通过async、await来接收值。
到此这篇关于JS图片压缩的简单实现的文章就介绍到这了,更多相关JS图片压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！