当前位置：首页 > JavaScript

js 实现图片功能

2026-03-01 04:30:00JavaScript

图片加载与显示

使用<img>标签动态加载图片，通过JavaScript设置src属性：

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

监听图片加载完成事件：

img.onload = function() {
  console.log('图片加载完成');
};

图片懒加载

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

图片预览与放大

使用CSS transform实现点击放大效果：

document.querySelectorAll('.preview-img').forEach(img => {
  img.addEventListener('click', () => {
    img.style.transform = img.style.transform === 'scale(2)' ? 'scale(1)' : 'scale(2)';
  });
});

图片裁剪与编辑

使用Canvas API进行图片裁剪：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
  canvas.width = 200;
  canvas.height = 200;
  ctx.drawImage(img, 0, 0, 200, 200);
  document.body.appendChild(canvas);
};
img.src = 'original.jpg';

图片上传

通过<input type="file">实现图片上传：

const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = function(event) {
    const img = new Image();
    img.src = event.target.result;
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
};
document.body.appendChild(input);

图片滤镜效果

使用Canvas实现滤镜效果：

function applyFilter(imageData) {
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i]; // 红色通道反相
    data[i+1] = 255 - data[i+1]; // 绿色通道反相
    data[i+2] = 255 - data[i+2]; // 蓝色通道反相
  }
  return imageData;
}

图片压缩

使用Canvas实现图片压缩：

function compressImage(img, quality = 0.8) {
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL('image/jpeg', quality);
}

js 实现图片功能