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

Question

我正在寻找一种优雅的方法来生成与FileAPI一起使用的缩略图.目前我得到一个表示图像的DataURL.问题是,如果图像非常大,则移动它并重新渲染它会变得CPU密集.我可以看到两个选项来解决这个问题.

• 在客户端上生成缩略图
• 在服务器上生成缩略图,将缩略图发送回客户端(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 = getThubmnail(image, 1/5);

document.body.appendChild(thumbnail);

注意:onload在尝试制作图像缩略图之前,请务必确保已加载(使用)图像.

Answer 2

好的,我可以看到这个工作的方式是将图像以较小的尺寸绘制到画布上,然后导出画布.假设您想要64px缩略图:

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