当前位置：首页 > JavaScript

js实现图片

2026-02-28 20:50:52JavaScript

图片加载与显示

在JavaScript中，可以通过Image对象或<img>标签动态加载图片。以下是两种常见方法：

// 方法1：使用Image对象
const img = new Image();
img.src = 'path/to/image.jpg';
document.body.appendChild(img);

// 方法2：动态创建img标签
const imgElement = document.createElement('img');
imgElement.src = 'path/to/image.jpg';
document.body.appendChild(imgElement);

图片懒加载

实现图片懒加载可优化页面性能，通过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/image.jpg" alt="Lazy loaded image">

图片压缩与预览

使用Canvas实现客户端图片压缩与预览：

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

图片滤镜效果

通过Canvas实现基础滤镜效果（如灰度化）：

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

图片上传处理

使用FormData实现图片上传：

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

  try {
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

响应式图片处理

通过window.matchMedia实现响应式图片切换：

js实现图片

function checkScreenSize() {
  const mediaQuery = window.matchMedia('(max-width: 768px)');
  const img = document.getElementById('responsive-img');

  if (mediaQuery.matches) {
    img.src = 'path/to/mobile-image.jpg';
  } else {
    img.src = 'path/to/desktop-image.jpg';
  }
}

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