当前位置：首页 > JavaScript

js 实现图片功能

2026-01-30 13:25:31JavaScript

图片加载与显示

在JavaScript中加载并显示图片可以通过Image对象或直接操作DOM实现。创建一个新的Image实例并设置其src属性即可触发图片加载：

const img = new Image();
img.src = 'path/to/image.jpg';
document.body.appendChild(img);

通过DOM操作动态添加<img>标签：

const imgElement = document.createElement('img');
imgElement.src = 'path/to/image.png';
imgElement.alt = 'Description';
document.getElementById('container').appendChild(imgElement);

图片预加载

预加载多张图片可提升用户体验，使用Promise结合Image对象实现批量加载：

function preloadImages(urls) {
  return Promise.all(
    urls.map(url => new Promise((resolve) => {
      const img = new Image();
      img.src = url;
      img.onload = () => resolve(url);
    }))
  );
}

preloadImages(['image1.jpg', 'image2.png']).then(() => {
  console.log('All images loaded');
});

图片懒加载

实现懒加载需结合IntersectionObserver API，当图片进入视口时再加载：

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));

HTML中需将实际URL放在data-src属性中：

<img data-src="path/to/lazy-image.jpg" alt="Lazy Loaded">

图片压缩与裁剪

使用Canvas API可实现客户端图片压缩与裁剪。以下示例将图片压缩为指定质量：

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      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);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

图片滤镜效果

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

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

  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] = avg;     // R
    data[i + 1] = avg; // G
    data[i + 2] = avg; // B
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

图片上传与预览

实现文件上传前的本地预览：

document.getElementById('file-input').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file.type.match('image.*')) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    const preview = document.getElementById('preview');
    preview.src = event.target.result;
  };
  reader.readAsDataURL(file);
});

响应式图片处理

使用window.matchMedia实现响应式图片切换：

js 实现图片功能

function checkScreenSize() {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  const img = document.getElementById('responsive-img');
  img.src = mediaQuery.matches ? 'mobile.jpg' : 'desktop.jpg';
}

window.addEventListener('resize', checkScreenSize);
checkScreenSize(); // 初始检查