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

我正在寻找一种优雅的方式来生成缩略图，以便与FileAPI一起使用。目前我得到代表图像的DataURL。问题是，如果图像非常大，比移动它并重新渲染它成为CPU密集型。我可以看到2个选项来解决这个问题。如何在现代浏览器中生成缩略图客户端？

生成客户端
缩略图在服务器上生成一个缩略图，发送缩略图返回给客户端（AJAX）。

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

我使用HTML5，并Firefox 3.6+：没有必要支持以外的任何其他Firefox 3.6+，请不要为IE 6.0

2010-07-12 Evan Carroll

看看这个问题，它可能有帮助：http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas – robertc 2010-07-12 23:56:15

好吧，我可以看到这个工作是绘制图像的方式提供建议画布尺寸较小，然后导出画布。假设您想要一个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获取的数据网址。

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

而且在出口帆布数据：http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

来源

2011-05-14 22:31:59

这里是你可以做什么：

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

来源

2011-09-26 15:45:41

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

回答

相关问题