如何通过JavaScript的File API读取和处理用户文件，以及它如何实现前端图片压缩或预览功能？

FileReader

URL.createObjectURL

Image

Canvas

<input type="file">

FileList

File

File

FileReader.readAsDataURL()

URL.createObjectURL()

FileReader.readAsDataURL()

<img>

src

document.getElementById('imageInput').addEventListener('change', function(event) {
    const file = event.target.files[0]; // 获取用户选择的第一个文件
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const previewImage = document.getElementById('preview');
            previewImage.src = e.target.result; // Base64字符串
            previewImage.style.display = 'block';
        };
        reader.onerror = function() {
            console.error('文件读取失败');
        };
        reader.readAsDataURL(file); // 读取文件内容为Data URL
    } else {
        alert('请选择一个图片文件。');
    }
});

URL.createObjectURL()

<img>

src

document.getElementById('imageInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
        const objectURL = URL.createObjectURL(file); // 创建一个临时的URL
        const previewImage = document.getElementById('preview');
        previewImage.src = objectURL;
        previewImage.style.display = 'block';

        // 记得在不需要的时候释放这个URL，防止内存泄露
        previewImage.onload = () => {
            URL.revokeObjectURL(objectURL);
        };
    } else {
        alert('请选择一个图片文件。');
    }
});

createObjectURL

URL.revokeObjectURL()

Canvas

Canvas

Canvas

document.getElementById('imageInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');

                // 设定最大宽度，如果图片宽度超过，则按比例缩放
                const maxWidth = 800; // 例如，最大宽度为800px
                let width = img.width;
                let height = img.height;

                if (width > maxWidth) {
                    height = Math.round((height * maxWidth) / width);
                    width = maxWidth;
                }

                canvas.width = width;
                canvas.height = height;

                ctx.drawImage(img, 0, 0, width, height); // 将图片绘制到Canvas上

                // 导出为JPEG格式，质量为0.7（可调整）
                canvas.toBlob(function(blob) {
                    // blob就是压缩后的图片文件，可以上传或再次预览
                    const compressedImageURL = URL.createObjectURL(blob);
                    const previewCompressed = document.getElementById('previewCompressed');
                    previewCompressed.src = compressedImageURL;
                    previewCompressed.style.display = 'block';
                    console.log('原始大小:', file.size / 1024, 'KB');
                    console.log('压缩后大小:', blob.size / 1024, 'KB');

                    previewCompressed.onload = () => URL.revokeObjectURL(compressedImageURL);
                }, 'image/jpeg', 0.7); // 第三个参数是压缩质量，0-1
            };
            img.src = e.target.result; // 加载原始图片
        };
        reader.readAsDataURL(file);
    } else {
        alert('请选择一个图片文件。');
    }
});

toBlob()

toDataURL()

toBlob()

Blob

Blob