js 实现图片功能

2026-04-04 05:05:47JavaScript

图片上传与预览

使用 <input type="file"> 实现图片上传功能，通过 FileReader 预览图片：

const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';

input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const img = document.createElement('img');
    img.src = event.target.result;
    document.body.appendChild(img);
  };

  reader.readAsDataURL(file);
});

document.body.appendChild(input);

图片压缩

利用 canvas 实现客户端图片压缩：

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

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

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

      canvas.toBlob((blob) => {
        resolve(blob);
      }, 'image/jpeg', quality);
    };
  });
}

图片懒加载

通过 IntersectionObserver 实现图片懒加载：

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;
      observer.unobserve(img);
    }
  });
});

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

图片裁剪

使用 cropper.js 库实现图片裁剪功能：

import Cropper from 'cropperjs';

const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x, event.detail.y);
  }
});

// 获取裁剪结果
const croppedCanvas = cropper.getCroppedCanvas();

图片滤镜效果

通过 CSS filter 属性实现基础滤镜：

function applyFilter(element, filterType) {
  const filters = {
    grayscale: 'grayscale(100%)',
    sepia: 'sepia(100%)',
    blur: 'blur(5px)',
    invert: 'invert(100%)'
  };
  element.style.filter = filters[filterType] || 'none';
}

图片下载

将 canvas 内容导出为图片文件：

function downloadImage(canvas, filename = 'image.png') {
  const link = document.createElement('a');
  link.download = filename;
  link.href = canvas.toDataURL('image/png');
  link.click();
}

图片拖拽上传

实现拖拽区域接收图片文件：

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropArea.classList.add('dragover');
});

dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');

  const files = e.dataTransfer.files;
  if (files.length) handleImageUpload(files[0]);
});

图片 EXIF 信息读取

使用 exif-js 库读取图片元数据：

import EXIF from 'exif-js';

function readExif(file) {
  return new Promise((resolve) => {
    EXIF.getData(file, function() {
      resolve(EXIF.getAllTags(this));
    });
  });
}

图片像素操作

通过 canvas 获取和修改像素数据：

js 实现图片功能

function processPixels(canvas) {
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.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;
  }

  ctx.putImageData(imageData, 0, 0);
}