js实现图片

图片加载与显示

在JavaScript中加载并显示图片可以通过Image对象或<img>标签实现。以下是两种常见方法：

使用Image对象动态加载

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

通过DOM操作创建<img>标签

const imgElement = document.createElement('img');
imgElement.setAttribute('src', 'path/to/image.png');
imgElement.setAttribute('alt', '描述文本');
document.querySelector('.container').appendChild(imgElement);

图片懒加载实现

懒加载能提升页面性能，通过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));

HTML需配合使用：

<img data-src="actual-image.jpg" src="placeholder.jpg" alt="描述">

图片压缩与预览

通过Canvas实现客户端图片压缩：

function compressImage(file, maxWidth, maxHeight, quality) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = function(e) {
      const img = new Image();
      img.onload = function() {
        const canvas = document.createElement('canvas');
        let width = img.width;
        let height = img.height;

        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }

        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

图片滤镜效果

使用CSS滤镜或Canvas实现特效：

CSS滤镜示例

document.getElementById('filter-btn').addEventListener('click', () => {
  const img = document.getElementById('target-image');
  img.style.filter = 'grayscale(50%) brightness(120%)';
});

Canvas像素级处理

function applySepia(imgElement) {
  const canvas = document.createElement('canvas');
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  const ctx = canvas.getContext('2d');
  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 r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    data[i] = Math.min(255, (r * 0.393) + (g * 0.769) + (b * 0.189));
    data[i + 1] = Math.min(255, (r * 0.349) + (g * 0.686) + (b * 0.168));
    data[i + 2] = Math.min(255, (r * 0.272) + (g * 0.534) + (b * 0.131));
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas.toDataURL();
}

图片裁剪与旋转

使用Canvas实现基础图片编辑功能：

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

function rotateImage(imgElement, degrees) {
  const canvas = document.createElement('canvas');
  const rad = degrees * Math.PI / 180;
  const sin = Math.abs(Math.sin(rad));
  const cos = Math.abs(Math.cos(rad));
  canvas.width = imgElement.width * cos + imgElement.height * sin;
  canvas.height = imgElement.width * sin + imgElement.height * cos;

  const ctx = canvas.getContext('2d');
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(rad);
  ctx.drawImage(imgElement, -imgElement.width / 2, -imgElement.height / 2);
  return canvas;
}