序言
有关图片大小压缩这一般都是由后面去完成~，可是前面把握这项技能也是非常重要的。
图片大小压缩构思
大家载入源图片以后，运用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来接受值。
本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!