html - 如何在现代浏览器中生成缩略图客户端？

Question

我正在寻找一种优雅的方式来生成用于 FileAPI 的缩略图.目前我得到一个 DataURL表示图像。问题是，如果图像非常大，那么移动它并重新渲染它会占用 CPU 资源。我可以看到 2 个选项来解决这个问题。

• 在客户端生成缩略图
• 在服务器上生成缩略图，将缩略图发送回客户端 (AJAX)。

使用 HTML5 我们有一个 canvas 元素？有谁知道如何使用它从图片生成缩略图？它们不必是完美的——采样质量是可以接受的。是否有一个 jQuery 插件可以为我做这件事？有没有其他方法可以加快客户端使用大图像的速度？

我正在使用 HTML5 和 Firefox 3.6+:除了 Firefox 3.6+ 之外不需要支持任何其他版本，请不要'为 IE 6.0 提供建议

Answer 1

以下是您可以执行的操作:

function getThumbnail(original, scale) {
  var canvas = document.createElement("canvas");

  canvas.width = original.width * scale;
  canvas.height = original.height * scale;

  canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);

  return canvas
}

现在，要创建缩略图，您只需执行与此等效的操作:

var image = document.getElementsByTagName("img")[0];
var thumbnail = getThumbnail(image, 1/5);

document.body.appendChild(thumbnail);

注意:在尝试制作缩略图之前，请记住确保图像已加载(使用 onload)。