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

Question

我正在寻找一种优雅的方式，用于使用FileAPI生成缩略图。目前我获得了一个代表图片的DataURL。问题是，如果图片非常大，那么在移动它并重新渲染它时会变得CPU密集。我可以看到两个解决方案来解决这个问题。

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

使用HTML5，我们有一个canvas元素？有人知道如何使用它从图片中生成缩略图吗？它们不需要完美——采样质量是可以接受的。有没有jQuery插件可以为我完成此操作？还有其他方法可以加速大型图像在客户端的使用吗？

我正在使用HTML5和Firefox 3.6+：没有必要支持除Firefox 3.6+外的任何版本，请不要为IE 6.0提供建议。

- Evan Carroll

---

请查看这个问题，它可能会有所帮助：https://dev59.com/9HE95IYBdhLWcg3wdtmj - robertc

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）。

- Daniel Brockman

Answer 2

好的，我认为这个方法可以起作用：将图像以较小的尺寸绘制到画布上，然后导出画布。比如说你想要一个64像素的缩略图：

var thumbSize = 64;
var canvas = document.getElementById("canvas");
canvas.width = thumbSize;
canvas.height = thumbSize;
var c = canvas.getContext("2d");
var img = new Image();
img.onload = function(e) {
    c.drawImage(this, 0, 0, thumbSize, thumbSize);
    document.getElementById("thumb").src = canvas.toDataURL("image/png");
};
img.src = fileDataURL;

使用此代码，将具有id“thumb”的图像元素用作缩略图元素。fileDataURL是从文件API获取的数据URL。

有关将图像绘制到画布上的更多信息，请访问：http://diveintohtml5.info/canvas.html#images 以及有关导出画布数据的信息，请访问：http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

- Colin Atkinson