如何在現代瀏覽器中生成縮略圖客戶端？

我正在尋找一種優雅的方式來生成縮略圖，以便與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

如何在現代瀏覽器中生成縮略圖客戶端？

回答

相關問題