js图片转缩略图

JavaScript 中将图片转换为缩略图通常涉及以下几个基础概念：

基础概念

Canvas API：HTML5 提供的 Canvas 元素允许通过 JavaScript 进行图形绘制。
Image 对象：用于加载和处理图像。
Blob 对象：表示不可变的原始数据，常用于存储二进制数据。

优势

灵活性：可以在客户端即时生成缩略图，减少服务器负载。
用户体验：用户无需等待服务器响应即可看到处理后的图片。
节省带宽：传输和处理小尺寸图片比大图更高效。

类型

固定尺寸缩略图：将图片缩放到固定的宽度和高度。
比例缩略图：保持图片原始宽高比的同时调整大小。

应用场景

社交媒体分享：快速生成适合分享的小图。
产品列表展示：在电商网站中快速加载和显示商品图片。
论坛帖子附件：用户上传图片后即时显示缩略图。

示例代码

以下是一个简单的示例，展示如何使用 JavaScript 和 Canvas API 将图片转换为固定尺寸的缩略图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片转缩略图</title>
</head>
<body>
<input type="file" id="fileInput">
<canvas id="thumbnailCanvas" width="100" height="100"></canvas>

<script>
document.getElementById('fileInput').addEventListener('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.getElementById('thumbnailCanvas');
                var ctx = canvas.getContext('2d');
                // 计算缩放比例并保持宽高比
                var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
                var width = img.width * scale;
                var height = img.height * scale;
                var x = (canvas.width - width) / 2;
                var y = (canvas.height - height) / 2;
                // 绘制缩略图
                ctx.drawImage(img, x, y, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});
</script>
</body>
</html>