js 实现图片功能实现

2026-03-01 00:24:44JavaScript

图片上传功能实现

使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。通过监听change事件获取用户选择的图片文件。

<input type="file" id="imageUpload" accept="image/*">

document.getElementById('imageUpload').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            document.body.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});

图片预览功能

在用户选择图片后立即显示预览，可以使用URL.createObjectURL()方法生成临时URL。

const imageUpload = document.getElementById('imageUpload');
const preview = document.getElementById('preview');

imageUpload.addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        preview.src = URL.createObjectURL(file);
        preview.style.display = 'block';
    }
});

图片压缩处理

使用Canvas API可以对图片进行压缩处理，适合上传前优化图片大小。

function compressImage(file, quality, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
        const img = new Image();
        img.src = event.target.result;
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            canvas.toBlob(callback, 'image/jpeg', quality);
        };
    };
}

图片裁剪功能

使用第三方库如cropper.js可以方便地实现图片裁剪功能。

import Cropper from 'cropperjs';

const image = document.getElementById('imageToCrop');
const cropper = new Cropper(image, {
    aspectRatio: 1,
    viewMode: 1,
    autoCropArea: 0.8,
    responsive: true,
    guides: true
});

document.getElementById('cropBtn').addEventListener('click', function() {
    const croppedCanvas = cropper.getCroppedCanvas();
    document.getElementById('result').appendChild(croppedCanvas);
});

图片滤镜效果

通过Canvas的getImageData和putImageData方法可以操作像素数据实现滤镜效果。

function applyFilter(image, filterFunction) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    filterFunction(imageData.data);
    ctx.putImageData(imageData, 0, 0);

    return canvas;
}

function grayscale(pixels) {
    for (let i = 0; i < pixels.length; i += 4) {
        const avg = (pixels[i] + pixels[i+1] + pixels[i+2]) / 3;
        pixels[i] = pixels[i+1] = pixels[i+2] = avg;
    }
}

图片上传到服务器

使用FormData对象和fetch API可以将图片上传到服务器。

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

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Upload error:', error));
}

响应式图片处理

使用window.matchMedia可以根据屏幕尺寸动态加载不同尺寸的图片。

js 实现图片功能实现

function loadResponsiveImage() {
    const smallScreen = window.matchMedia('(max-width: 600px)');
    const image = document.getElementById('responsiveImage');

    if (smallScreen.matches) {
        image.src = 'small.jpg';
    } else {
        image.src = 'large.jpg';
    }
}

window.addEventListener('resize', loadResponsiveImage);
loadResponsiveImage();