当前位置：首页 > JavaScript

js可以实现的图片效果

2026-04-05 00:03:46JavaScript

图片滤镜效果

通过Canvas API或CSS滤镜属性实现多种图片滤镜效果。常见的滤镜包括灰度、模糊、亮度调整、对比度调整等。CSS滤镜使用filter属性，Canvas通过像素级操作实现更复杂的滤镜。

// CSS滤镜示例
img.style.filter = 'grayscale(50%) blur(2px)';

// Canvas滤镜示例
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 像素处理逻辑
ctx.putImageData(imageData, 0, 0);

图片懒加载

使用Intersection Observer 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));

图片裁剪与缩放

通过Canvas实现图片的裁剪、缩放和旋转功能。常用于头像编辑、图片上传预处理等场景。

function cropImage(img, x, y, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
  return canvas.toDataURL();
}

图片瀑布流布局

实现响应式图片瀑布流布局，根据容器宽度自动计算列数和图片位置。常用于图片展示类网站。

function createMasonry(container, images, columnCount) {
  const columnHeights = Array(columnCount).fill(0);
  images.forEach(img => {
    const minHeight = Math.min(...columnHeights);
    const columnIndex = columnHeights.indexOf(minHeight);
    img.style.position = 'absolute';
    img.style.top = `${minHeight}px`;
    img.style.left = `${columnIndex * (container.offsetWidth / columnCount)}px`;
    columnHeights[columnIndex] += img.offsetHeight;
  });
  container.style.height = `${Math.max(...columnHeights)}px`;
}

图片拖拽上传

实现拖拽上传图片功能，支持预览和文件验证。通过HTML5的拖放API和FileReader实现。

const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  if (files.length && files[0].type.match('image.*')) {
    const reader = new FileReader();
    reader.onload = (event) => {
      const img = document.createElement('img');
      img.src = event.target.result;
      dropArea.appendChild(img);
    };
    reader.readAsDataURL(files[0]);
  }
});

图片放大镜效果

创建图片局部放大效果，通过计算鼠标位置和放大区域实现。常用于产品细节展示。

function createMagnifier(img, zoom) {
  const magnifier = document.createElement('div');
  magnifier.style.position = 'absolute';
  img.parentElement.addEventListener('mousemove', (e) => {
    const rect = img.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    magnifier.style.backgroundImage = `url(${img.src})`;
    magnifier.style.backgroundSize = `${img.width * zoom}px ${img.height * zoom}px`;
    magnifier.style.backgroundPosition = `-${x * zoom}px -${y * zoom}px`;
  });
  return magnifier;
}

图片压缩上传

在前端实现图片压缩后再上传，减少服务器负担和带宽消耗。通过Canvas的toDataURL方法调整图片质量。

js可以实现的图片效果

function compressImage(file, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (event) => {
      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);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = event.target.result;
    };
    reader.readAsDataURL(file);
  });
}