js 实现图片功能实现

图片上传功能实现

使用HTML的<input type="file">元素配合JavaScript可以实现图片上传功能。以下是一个基础实现示例：

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" src="" alt="Preview" style="max-width: 300px; display: none;">

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file.type.match('image.*')) {
        alert('请选择图片文件');
        return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
        const preview = document.getElementById('preview');
        preview.src = e.target.result;
        preview.style.display = 'block';
    };
    reader.readAsDataURL(file);
});

图片压缩处理

上传前对图片进行压缩可以优化性能：

function compressImage(file, maxWidth, maxHeight, quality) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = URL.createObjectURL(file);

        img.onload = () => {
            const canvas = document.createElement('canvas');
            let width = img.width;
            let height = img.height;

            if (width > maxWidth || height > maxHeight) {
                const ratio = Math.min(maxWidth / width, maxHeight / height);
                width *= ratio;
                height *= ratio;
            }

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

            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);

            canvas.toBlob((blob) => {
                resolve(new File([blob], file.name, {type: 'image/jpeg'}));
            }, 'image/jpeg', quality);
        };
    });
}

图片裁剪功能

使用canvas实现图片裁剪：

function cropImage(imageSrc, cropArea) {
    return new Promise((resolve) => {
        const img = new Image();
        img.src = imageSrc;

        img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = cropArea.width;
            canvas.height = cropArea.height;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(
                img, 
                cropArea.x, cropArea.y, cropArea.width, cropArea.height,
                0, 0, cropArea.width, cropArea.height
            );

            resolve(canvas.toDataURL('image/jpeg'));
        };
    });
}

图片滤镜效果

为图片添加滤镜效果：

function applyFilter(imageData, filterType) {
    const filters = {
        grayscale: function(data) {
            for (let i = 0; i < data.length; i += 4) {
                const avg = (data[i] + data[i+1] + data[i+2]) / 3;
                data[i] = data[i+1] = data[i+2] = avg;
            }
        },
        sepia: function(data) {
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i+1];
                const b = data[i+2];
                data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
                data[i+1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
                data[i+2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
            }
        }
    };

    if (filters[filterType]) {
        filters[filterType](imageData.data);
    }
    return imageData;
}

图片上传至服务器

使用Fetch API将图片上传到服务器：

async function uploadImage(file, uploadUrl) {
    const formData = new FormData();
    formData.append('image', file);

    try {
        const response = await fetch(uploadUrl, {
            method: 'POST',
            body: formData
        });
        return await response.json();
    } catch (error) {
        console.error('上传失败:', error);
        throw error;
    }
}

图片懒加载

实现图片懒加载优化页面性能：

function lazyLoadImages() {
    const lazyImages = document.querySelectorAll('img[data-src]');

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => observer.observe(img));
}

// 页面加载完成后调用
window.addEventListener('load', lazyLoadImages);
window.addEventListener('scroll', lazyLoadImages);