मैं एक आधुनिक ब्राउज़र में थंबनेल क्लाइंट-साइड कैसे उत्पन्न करूं?

Question

मैं FileAPI के साथ उपयोग के लिए थंबनेल उत्पन्न करने के लिए एक शानदार तरीका ढूंढ रहा हूं। वर्तमान में मुझे एक छवि का प्रतिनिधित्व करने वाला DataURL मिलता है। समस्या यह है कि अगर छवि बहुत बड़ी है, इसे चारों ओर ले जाने और इसे फिर से प्रस्तुत करने से सीपीयू गहन हो जाता है। मैं इसके चारों ओर पाने के लिए 2 विकल्प देख सकता हूं।

• ग्राहक
• पर एक थंबनेल उत्पन्न सर्वर पर एक थंबनेल उत्पन्न करें, थंबनेल ग्राहक (AJAX) के लिए वापस भेज देते हैं।

HTML5 के साथ हमारे पास canvas तत्व है? क्या किसी को चित्रों से थंबनेल उत्पन्न करने के लिए इसका उपयोग करना है? उन्हें सही नहीं होना चाहिए - नमूना गुणवत्ता स्वीकार्य है। क्या jQuery प्लगइन है जो मेरे लिए यह करेगा? क्या बड़ी छवियों के क्लाइंटसाइड उपयोग को गति देने का कोई और तरीका है?

मैं HTML5 उपयोग कर रहा हूँ, और Firefox 3.6+: वहाँ Firefox 3.6+ के अलावा और कुछ का समर्थन करने की कोई जरूरत, के लिए IE 6.0

Answer 1

ठीक है, जिस तरह से मैं इस काम के लिए छवि आ रहा है देख सकते हैं सुझाव प्रदान नहीं करते कृपया है कैनवास एक छोटे आकार में, फिर कैनवास निर्यात। यदि आप एक 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; 

इस कोड, आईडी "अंगूठे" के साथ एक छवि तत्व के साथ

थंबनेल तत्व के रूप में प्रयोग किया जाता है। fileDataURL वह डेटा यूआरएल है जो आपको फ़ाइल एपीआई से मिला है।

कैनवास पर चित्र ड्राइंग पर अधिक जानकारी: http://diveintohtml5.info/canvas.html#images

और निर्यात कैनवास डेटा पर: http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx

Answer 2

यहाँ आप क्या कर सकते हैं:

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 का उपयोग करके) इसका थंबनेल बनाने का प्रयास करने से पहले।