纯JS 通过Canvas压缩图片，操作步骤非常详细易懂

最新推荐文章于 2024-01-15 21:27:54 发布

weixin_41691244

最新推荐文章于 2024-01-15 21:27:54 发布

阅读量967

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_41691244/article/details/104614387

版权

本文介绍了一种使用纯JavaScript通过Canvas来压缩图片的方法。在压缩过程中，设定最大宽度或高度限制，根据比例调整图片尺寸，并在输出时应用0.75的模糊度，以减小文件大小而不明显降低画质。代码可供直接复制和使用，欢迎交流改进。

摘要由CSDN通过智能技术生成

闲着没事儿，自己做了一个JS压缩图片的过程，顺便整理了一下自己的思路，发出来分享，可以直接复制粘贴使用。如果哪里写的不到位，请各位及时提醒，共同提高。

具体操作的方式就是设置一个最大宽度或者高度，如果超出了，就进行压缩，如果不符合条件就不压缩了。通过压缩图片的长宽比，进行压缩图片。后期在输出的时候，设置了一个0.75的模糊程度，这样可以让图片更小，还不至于太模糊，这些参数都可以调节。

以下是完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS图片压缩</title>
</head>
<body>   
    <input type="file" id="file" onchange = "compress(this)">
    <img id = "img">
    <!--图片预览区-->
    <button>提交</button>
    <script>
    function compress(e){
        //拿到本次上传的文件对象
        var file = e.files[0]
        //如果有需要，可以判断file.type是否是图片&#x

最低0.47元/天解锁文章

weixin_41691244

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯JS 通过Canvas压缩图片，操作步骤非常详细易懂

闲着没事儿，自己做了一个JS压缩图片的过程，顺便整理了一下自己的思路，发出来分享，可以直接复制粘贴使用。如果哪里写的不到位，请各位及时提醒，共同提高。具体操作的方式就是设置一个最大宽度或者高度，如果超出了，就进行压缩，如果不符合条件就不压缩了。通过压缩图片的长宽比，进行压缩图片。后期在输出的时候，设置了一个0.75的模糊程度，这样可以让图片更小，还不至于太模糊，这些参数都可以调节。以下是完...
复制链接

扫一扫