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 = 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获取的数据网址。

有关在画布上绘制图像的更多信息：http://diveintohtml5.info/canvas.html#images

导出画布数据：http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

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

2 个答案: