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

46 阅读 0 评论 31 点赞

我是靠谱客的博主怕孤单钢笔，最近开发中收集的这篇文章主要介绍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>