jquery 图片压缩

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片压缩是指在不显著降低图片质量的前提下，减小图片文件大小的过程，这有助于提高网页加载速度和减少存储空间。

类型

客户端压缩：在用户的浏览器中进行图片压缩，适用于不需要服务器处理的场景。
服务器端压缩：在服务器端进行图片压缩，适用于需要保证图片质量的场景。

应用场景

网页优化：减少图片文件大小，提高网页加载速度。
移动应用：减少图片存储空间，节省用户流量。
社交媒体：上传图片时进行压缩，减少上传时间和存储空间。

示例代码（客户端压缩）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 图片压缩</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<body>
    <img id="image" src="path/to/your/image.jpg" alt="Image">
    <button id="compress">压缩图片</button>
    <script>
        $(document).ready(function() {
            $('#compress').click(function() {
                html2canvas($('#image')[0]).then(function(canvas) {
                    var imgData = canvas.toDataURL('image/jpeg', 0.7); // 0.7 是压缩质量，范围 0-1
                    $('#image').attr('src', imgData);
                });
            });
        });
    </script>
</body>
</html>