当前位置：首页 > JavaScript

js可以实现的图片效果

2026-01-31 08:04:45JavaScript

图片滤镜效果

通过Canvas或WebGL实现各种滤镜效果，如灰度、反色、模糊、锐化等。使用getImageData修改像素数据，或直接应用CSS滤镜属性（如filter: grayscale(100%)）。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  ctx.drawImage(img, 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);
};
img.src = 'image.jpg';

图片懒加载

延迟加载视口外的图片以减少初始页面负载。使用IntersectionObserver检测图片是否进入视口，动态设置src属性。

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或第三方库（如Cropper.js）实现交互式裁剪和缩放。通过绘制部分图像区域或调整drawImage参数实现。

const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  // 裁剪坐标为(x, y, width, height)
  ctx.drawImage(img, 50, 50, 200, 200, 0, 0, 100, 100);
};
img.src = 'image.jpg';

图片轮播与动画

使用CSS过渡或JavaScript定时器实现幻灯片效果。结合opacity和transform属性实现平滑切换。

let currentIndex = 0;
const slides = document.querySelectorAll('.slide');
function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.style.display = i === index ? 'block' : 'none';
  });
}
setInterval(() => {
  currentIndex = (currentIndex + 1) % slides.length;
  showSlide(currentIndex);
}, 3000);

图片压缩与上传

通过Canvas的toBlob方法调整图片质量，结合FormData实现前端压缩后上传。

function compressImage(file, quality, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      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(callback, 'image/jpeg', quality);
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

图片拖拽与排序

监听dragstart、dragover和drop事件实现图片拖拽排序。更新DOM元素位置或数组顺序反映变化。

const container = document.getElementById('imageContainer');
container.addEventListener('dragover', (e) => {
  e.preventDefault();
});
container.addEventListener('drop', (e) => {
  e.preventDefault();
  const draggedItem = document.querySelector('.dragging');
  const newPosition = e.target.closest('.image-item');
  if (newPosition) {
    container.insertBefore(draggedItem, newPosition);
  }
});

动态生成图片

基于数据动态创建图片元素或Canvas绘图。适用于图表、头像生成等场景。

js可以实现的图片效果

const data = [30, 50, 80];
const canvas = document.getElementById('chartCanvas');
const ctx = canvas.getContext('2d');
data.forEach((value, index) => {
  ctx.fillStyle = `hsl(${index * 120}, 70%, 50%)`;
  ctx.fillRect(index * 60, 100 - value, 50, value);
});