Html 如何在现代浏览器中生成缩略图客户端？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3231449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I generate a thumbnail client-side in a modern browser?
提问by Evan Carroll
I'm looking for an elegant way to generate a thumbnail for use with the FileAPI. Currently I get a DataURLrepresenting an image. Problem is, if the image is very large, than moving it around and rerendering it becomes CPU intensive. I can see 2 options to get around this.
我正在寻找一种优雅的方式来生成用于FileAPI的缩略图。目前我得到一个代表图像的DataURL。问题是，如果图像非常大，那么移动它并重新渲染它会成为 CPU 密集型的。我可以看到 2 个选项来解决这个问题。
- Generate a thumbnail on the client
- Generate a thumbnail on the server, send the thumbnail back to the client (AJAX).
- 在客户端生成缩略图
- 在服务器上生成缩略图，将缩略图发送回客户端（AJAX）。
With HTML5we have a canvaselement? Does anyone know how to use it to generate thumbnails from pictures? They don't have to be perfect -- sampling quality is acceptable. Is there a jQueryplugin that will do this for me? Are there any other way to speed up the clientside use of large images?
随着HTML5我们有一个canvas元素？有谁知道如何使用它从图片生成缩略图？它们不必是完美的——采样质量是可以接受的。有没有jQuery插件可以为我做到这一点？有没有其他方法可以加快客户端对大图像的使用？
I'm using HTML5, and Firefox 3.6+: there is no need to support anything other than Firefox 3.6+, please don't provide suggestions for IE 6.0
我正在使用HTML5, and Firefox 3.6+：除了 不需要支持任何东西Firefox 3.6+，请不要提供建议IE 6.0
回答by Daniel Brockman
Here's what you can do:
您可以执行以下操作：
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
}
Now, to create thumbnails, you simply do the equivalent of this:
现在，要创建缩略图，您只需执行与此等效的操作：
var image = document.getElementsByTagName("img")[0];
var thumbnail = getThubmnail(image, 1/5);
document.body.appendChild(thumbnail);
Note:Remember to make sure that the image is loaded (using onload) before trying to make a thumbnail of it.
注意：onload在尝试制作缩略图之前，请记住确保图像已加载（使用）。
回答by Colin Atkinson
Okay, the way I can see this working is drawing the image to the canvas at a smaller size, then exporting the canvas. Say you want a 64px thumbnail:
好的，我看到这个工作的方式是以较小的尺寸将图像绘制到画布上，然后导出画布。假设你想要一个 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;
With this code, an image element with the id "thumb" is used as the thumbnail element. fileDataURLis the data URL that you got from the file API.
使用此代码，id 为“thumb”的图像元素用作缩略图元素。fileDataURL是您从文件 API 获得的数据 URL。
More information on drawing images to the canvas: http://diveintohtml5.info/canvas.html#images
有关在画布上绘制图像的更多信息：http: //diveintohtml5.info/canvas.html#images
And on exporting canvas data: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx
以及导出画布数据：http: //msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx
