js 实现图片功能实现

图片加载与显示

使用 Image 对象加载图片，通过监听 onload 事件确保图片加载完成后显示：

const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
  document.body.appendChild(img);
};
img.onerror = function() {
  console.error('图片加载失败');
};

Canvas 绘制图片

通过 Canvas API 绘制图片，支持缩放和裁剪：

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

图片压缩与上传

使用 Canvas 压缩图片并转换为 Blob 上传：

function compressImage(file, quality = 0.8) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.src = e.target.result;
      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        canvas.toBlob((blob) => resolve(blob), 'image/jpeg', quality);
      };
    };
    reader.readAsDataURL(file);
  });
}
// 调用示例
compressImage(inputFile).then(blob => {
  const formData = new FormData();
  formData.append('image', blob);
  fetch('/upload', { method: 'POST', body: formData });
});

图片滤镜效果

通过 Canvas 的 getImageData 和 putImageData 实现滤镜（如灰度化）：

function applyGrayscale(canvas) {
  const ctx = canvas.getContext('2d');
  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);
}

图片懒加载

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

图片裁剪与缩放

使用第三方库（如 Cropper.js）实现交互式裁剪：

import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x, event.detail.y);
  }
});
// 获取裁剪结果
const croppedCanvas = cropper.getCroppedCanvas();

以上方法覆盖了图片处理的核心场景，可根据需求选择或组合使用。