JS图片压缩的简单实现
更新时间：2023年05月22日 09:17:07 作者：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图片压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
基于JavaScript或jQuery实现网站夜间/高亮模式
这篇文章主要介绍了基于JavaScript或jQuery实现网站夜间/高亮模式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
本篇文章给详细讲解了9个JavaScript图表库以及用法，需要的朋友参考学习下。2017-12-12
我花了很多时间，学习这个部分，还做了很多笔记。但是都属于强行记忆，无法从根本上理解。2011-08-08
这篇文章主要为大家详细介绍了ionic实现下拉刷新载入数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了微信小程序实现下拉选项框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
json decode出现中文乱码，返回null，很多朋友都遇到过吧，该怎么解决呢？下面小编把解决办法分享在脚本之家网站上，供大家学习2015-10-10
微信小程序中有许多地方需要用户注册用户信息的地方，用户需要填写手机号等，下面小编给大家分享微信小程序获取手机号授权用户登录功能，需要的朋友参考下吧2017-11-11
最近项目需求是统计当前摄像头中的人脸个数,所以下面这篇文章主要给大家介绍了关于基于微信小程序实现人脸数量检测的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
本文对JavaScript对象的属性、对象的方法、对象的属性、访问对象属性的语法进行了实例分析介绍，有需要的朋友可以看下2016-12-12
这篇文章主要介绍了JavaScript实现打开链接页面的方式，非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论