JS圖片壓縮的簡單實現(xiàn)

更新時間：2023年05月22日 09:17:07 作者：1in

本文主要介紹了JS圖片壓縮的簡單實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

圖片壓縮思路

我們讀取源圖片之后，利用canvas畫板畫出源圖片，然后利用toDataURL這個API轉換成base64的格式

需要FileReade這個對象去reader圖片，并且利用reader.onload這個監(jiān)聽事件完成圖片壓縮。

源碼

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")
//創(chuàng)建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()
}
//構建綁定事件函數(shù)
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事件觸發(fā)回調函數(shù)，所以需要Promise的resolve回調傳回值并接收
? ? return new Promise((resolve)=>{
? ? ? ? oImg.onload=()=>{
? ? ? ? ? ? const imageWidth=oImg.width
? ? ? ? ? ? const imageHeight=oImg.height
? ? ? ? ? ? oCan.width=imageWidth
? ? ? ? ? ? oCan.height=imageHeight
? ? ? ? ? ? //利用canvas的drawImage函數(shù)去畫出源圖像
? ? ? ? ? ? context.drawImage(oImg,0,0,imageWidth,imageHeight)
? ? ? ? ? ? const compressedImgSrc = doCompress(oCan, type, imgSrc)
? ? ? ? ? ? resolve(compressedImgSrc)
? ? ? ? }
? ? })
}
//創(chuàng)建遞歸函數(shù)，如果壓縮的文件大小大于源文件就繼續(xù)壓縮
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來執(zhí)行壓縮代碼的，所以我們需要用Promise的resolve回調來傳出值，通過async、await來接收值。

到此這篇關于JS圖片壓縮的簡單實現(xiàn)的文章就介紹到這了,更多相關JS圖片壓縮內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: