jquery图片压缩

基础概念

jQuery 图片压缩是指使用 jQuery 库来减小图片文件大小的过程。这个过程通常包括调整图片尺寸、降低图片质量或使用更高效的编码格式等操作。

类型

尺寸压缩：调整图片的宽度和高度，使其适应特定的显示需求。
质量压缩：降低图片的质量，以减小文件大小。
格式转换：将图片转换为更高效的编码格式，如 WebP。

应用场景

网页优化：在网页加载时减少图片的加载时间，提升用户体验。
移动应用：在移动设备上减少图片占用的存储空间和流量消耗。
社交媒体：在社交媒体平台上上传图片时，减小图片文件大小以便更快地分享。

示例代码

以下是一个使用 jQuery 和 HTML5 Canvas 进行图片压缩的示例代码：

<!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>
</head>
<body>
    <input type="file" id="imageUpload" accept="image/*">
    <img id="previewImage" src="#" alt="压缩后的图片" style="display:none;">

    <script>
        $(document).ready(function() {
            $('#imageUpload').on('change', function(e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = new Image();
                        img.onload = function() {
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            var MAX_WIDTH = 800;
                            var MAX_HEIGHT = 600;
                            var width = img.width;
                            var height = img.height;

                            if (width > height) {
                                if (width > MAX_WIDTH) {
                                    height *= MAX_WIDTH / width;
                                    width = MAX_WIDTH;
                                }
                            } else {
                                if (height > MAX_HEIGHT) {
                                    width *= MAX_HEIGHT / height;
                                    height = MAX_HEIGHT;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);

                            canvas.toBlob(function(blob) {
                                var compressedImage = URL.createObjectURL(blob);
                                $('#previewImage').attr('src', compressedImage).show();
                            }, 'image/jpeg', 0.7);
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>