js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)

js常用插件之conversion压缩图片(重点:不改变尺寸大小)

欢迎点击: 个人官网博客

图片压缩只是他的一种功能,更多可以查看官方文档

重点:压缩体积并且图片尺寸大小是不变的

用法很简单:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./conversion.js"></script>
</head>

<body>
    <a href="https://github.com/WangYuLue/image-conversion">文档</a>
    <input id="demo" type="file" onchange="view()">
    <button id="a">按钮</button>
    <img id="img" src="" alt="">
</body>
<script>
    let data
    function view() {
    
    
        const file = document.getElementById('demo').files[0];
        //200为kb
        console.log('压缩前=>',file)
        imageConversion.compressAccurately(file, 20).then(res => {
    
    
            console.log('压缩后=>',res)
            var file = new File([res], 'filename', {
    
    
                type: res.type,
                lastModified: Date.now()
            });
            console.log('压缩=>',file)
            data = file
        })

    }
    document.querySelector('#a').onclick = async function () {
    
    
        document.querySelector('#img').setAttribute('src', await imageConversion.filetoDataURL(data))
    }
</script>

</html>

压缩后效果:
重点:并且图片尺寸大小是不变的
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41560520/article/details/112567169
今日推荐