js实现thumbnail

使用Canvas生成缩略图

通过HTML5 Canvas可以轻松实现图片缩略图功能。这种方法适合在浏览器端处理，无需服务器参与。

function createThumbnail(file, width, height, callback) {
  const reader = new FileReader();
  reader.onload = function(e) {
    const img = new Image();
    img.onload = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // 保持宽高比
      const ratio = Math.min(width/img.width, height/img.height);
      canvas.width = img.width * ratio;
      canvas.height = img.height * ratio;

      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      callback(canvas.toDataURL('image/jpeg'));
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

使用第三方库

对于更复杂的缩略图需求，可以考虑使用成熟的JavaScript库：

// 使用sharp.js（需在Node.js环境）
const sharp = require('sharp');

async function createThumbnail(inputPath, outputPath, width, height) {
  await sharp(inputPath)
    .resize(width, height)
    .toFile(outputPath);
}

响应式缩略图方案

结合CSS和少量JavaScript可以实现响应式缩略图：

<style>
.thumbnail-container {
  width: 100%;
  max-width: 300px;
}
.thumbnail {
  width: 100%;
  height: auto;
  object-fit: cover;
}
</style>

<script>
function responsiveThumbnail(imgElement) {
  const container = imgElement.parentElement;
  const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight;
  container.style.aspectRatio = aspectRatio;
}
</script>

缩略图缓存策略

为提高性能，可以实现缩略图缓存：

const thumbnailCache = {};

function getCachedThumbnail(url, size, callback) {
  const cacheKey = `${url}-${size}`;
  if (thumbnailCache[cacheKey]) {
    callback(thumbnailCache[cacheKey]);
    return;
  }

  createThumbnail(url, size, size, (thumbnail) => {
    thumbnailCache[cacheKey] = thumbnail;
    callback(thumbnail);
  });
}

缩略图质量优化

调整缩略图质量和文件大小：

function optimizeThumbnailQuality(canvas, quality = 0.8) {
  return canvas.toDataURL('image/jpeg', quality);
}

每种方法适用于不同场景，浏览器端处理适合简单需求，Node.js方案适合服务器端处理，而响应式方案适合现代网页应用。根据具体需求选择最适合的实现方式。