当前位置：首页 > JavaScript

js实现图片

2026-01-15 14:26:30JavaScript

图片加载与显示

在JavaScript中，可以通过Image对象动态加载图片。创建实例后设置src属性触发加载，通过onload回调处理加载完成后的操作：

const img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  document.body.appendChild(img); // 显示到页面
};

图片懒加载

实现图片懒加载需结合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));

图片压缩与裁剪

使用Canvas对图片进行压缩或裁剪。以下代码将图片压缩为指定质量并输出为Blob：

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        canvas.toBlob(resolve, 'image/jpeg', quality);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

图片滤镜效果

通过Canvas的getImageData和putImageData方法修改像素数据实现滤镜：

function applyGrayscale(imgElement) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  ctx.drawImage(imgElement, 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] = data[i + 1] = data[i + 2] = avg;
  }
  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

图片上传至服务器

使用FormData和fetch实现图片上传：

async function uploadImage(file) {
  const formData = new FormData();
  formData.append('image', file);
  const response = await fetch('/upload', {
    method: 'POST',
    body: formData
  });
  return response.json();
}

js实现图片