脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS图片压缩

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图片压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • dateformat.js超轻量级的JS日期处理库的使用

    dateformat.js超轻量级的JS日期处理库的使用

    dateformat.js 是一个非常简洁、轻量级、不到 5kb 的很简洁的 Javascript 库,本文主要介绍了dateformat.js超轻量级的JS日期处理库的使用,感兴趣的可以了解一下
    2023-12-12
  • TypeScript 使用 Tuple Union 声明函数重载

    TypeScript 使用 Tuple Union 声明函数重载

    这篇文章主要介绍了TypeScript 使用 Tuple Union 声明函数重载，TypeScript 中为函数添加多个签名后，依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数，下文就来探索方法和技巧吧
    2022-04-04
  • 基于canvasJS在PHP中制作动态图表

    基于canvasJS在PHP中制作动态图表

    这篇文章主要介绍了基于canvasJS在PHP中制作动态图表,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 改进UCHOME的记录发布，增强可访问性用户体验

    改进UCHOME的记录发布，增强可访问性用户体验

    今天是看到UCDChina上的一篇文章文章 ，是关于SNS的用户体验问题，发觉文中提到的第一个细节，UCHOME就做的不好，于是改进了一下。
    2011-01-01
  • JavaScript实现弹出窗口效果

    JavaScript实现弹出窗口效果

    这篇文章主要为大家详细介绍了JavaScript实现弹出窗口效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-12-12
  • bootstrap读书笔记之CSS组件（上）

    bootstrap读书笔记之CSS组件（上）

    这篇文章主要介绍了bootstrap读书笔记之CSS组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 深入理解 webpack 文件打包机制(小结)

    深入理解 webpack 文件打包机制(小结)

    这篇文章主要介绍了深入理解 webpack 文件打包机制(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • JavaScript 绘制饼图的示例

    JavaScript 绘制饼图的示例

    这篇文章主要介绍了JavaScript 绘制饼图的示例，帮助大家更好的利用JavaScript绘制图表，感兴趣的朋友可以了解下
    2021-02-02
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享，常用的有四种方式，分别是globalData、本地缓存、mobx-miniprogram和westore，本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理，需要的可以收藏一下
    2023-06-06
  • 如何实现axios的自定义适配器adapter

    如何实现axios的自定义适配器adapter

    Axios是一个非常优秀的基于promise的HTTP库，可以用在浏览器和node.js中。并且提供了很多便捷的功能，但如果我们想基于axios 扩展一些自己的数据请求方式（例如某些APP内专属的数据请求方式等），并能够使用上axios提供的便捷功能，该怎么自定义一个适配器adapter
    2021-05-05

最新评论