js实现调整图片大小

在JavaScript中调整图片大小通常涉及到使用HTML5的<canvas>元素和FileReader API来读取和处理图片文件。以下是实现这一功能的基础概念和相关步骤：

基础概念

Canvas元素：HTML5的<canvas>元素提供了一个画布，可以通过JavaScript脚本来绘制图形。
FileReader API：允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。
Image对象：HTML的<img>元素对应的JavaScript对象，可以用来加载和处理图片。

实现步骤

创建一个<canvas>元素和一个<input type="file">元素。
使用FileReader读取用户选择的图片文件。
创建一个Image对象，并将其src属性设置为读取到的图片数据。
当图片加载完成后，在<canvas>上绘制调整大小后的图片。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调整图片大小</title>
</head>
<body>
<input type="file" id="fileInput">
<canvas id="canvas"></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('canvas');
                var ctx = canvas.getContext('2d');
                var maxWidth = 800; // 设置最大宽度
                var maxHeight = 600; // 设置最大高度
                var width = img.width;
                var height = img.height;

                if (width > height) {
                    if (width > maxWidth) {
                        height *= maxWidth / width;
                        width = maxWidth;
                    }
                } else {
                    if (height > maxHeight) {
                        width *= maxHeight / height;
                        height = maxHeight;
                    }
                }

                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0, width, height);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});
</script>
</body>
</html>