jquery图片缩略图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。图片缩略图通常是指将一张大图片缩小成多个小图片，以便于快速浏览和选择。

类型

静态缩略图：预先生成的小图片，直接嵌入到 HTML 中。
动态缩略图：在页面加载时或用户操作时动态生成的小图片。

应用场景

图片库：在图片库或相册中，用户可以通过缩略图快速浏览和选择图片。
电商网站：在商品展示页面，使用缩略图可以让用户快速查看商品图片。
社交媒体：在用户上传图片时，生成缩略图以便于其他用户快速浏览。

示例代码

以下是一个简单的示例，展示如何使用 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/*">
    <div id="thumbnailContainer"></div>

    <script>
        $(document).ready(function() {
            $('#imageUpload').on('change', function(event) {
                var file = event.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 = 100;
                            var MAX_HEIGHT = 100;
                            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);

                            var thumbnail = canvas.toDataURL('image/png');
                            $('#thumbnailContainer').html('<img src="' + thumbnail + '" alt="Thumbnail">');
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>
</body>
</html>