15

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

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

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

我正在使用HTML5，并且Firefox 3.6+：不需要支持其他任何东西Firefox 3.6+，请不要提供建议IE 6.0

4

2 回答 2

16

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

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请记住在尝试制作缩略图之前确保已加载（使用）图像。

于 2011-09-26T15:45:41.290 回答
11

好的，我可以看到这个工作的方式是将图像以较小的尺寸绘制到画布上，然后导出画布。假设您想要一个 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

于 2011-05-14T22:31:59.177 回答