जावास्क्रिप्ट में एक छवि (डेटा यूआरआई प्रारूप में) स्केल कैसे करें (वास्तविक स्केलिंग, स्टाइल का उपयोग नहीं कर रहे हैं)

Question

हम क्रोम ब्राउज़र में एक दृश्य टैब कैप्चर कर रहे हैं (एक्सटेंशन API chrome.tabs.captureVisibleTab का उपयोग करके) और स्नैपशॉट प्राप्त करना डेटा यूआरआई योजना (बेस 64 एन्कोडेड स्ट्रिंग) में।

क्या कोई जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग किसी छवि को किसी निश्चित आकार में स्केल करने के लिए किया जा सकता है?

वर्तमान में हम इसे सीएसएस के माध्यम से स्टाइल कर रहे हैं, लेकिन प्रदर्शन दंड का भुगतान करना होगा क्योंकि चित्र अधिक से 100 गुना अधिक हैं। अतिरिक्त चिंता भी स्थानीय स्टोरेज पर लोड है जिसका उपयोग हम अपने स्नैपशॉट्स को बचाने के लिए करते हैं।

क्या कोई इस डेटा को संसाधित करने के तरीके के बारे में जानता है यूआरआई योजना स्वरूपित चित्रों और उनके आकार को कम करके उन्हें कम कर देता है?

संदर्भ:

• डाटा यूआरआई http://code.google.com/p/recently-closed-tabs

Answer 1

यहां एक ऐसा फ़ंक्शन है जो आपको चाहिए। आप इसे एक छवि का यूआरएल देते हैं (उदा। से परिणाम, लेकिन यह कोई यूआरएल हो सकता है), वांछित आकार, और एक कॉलबैक। यह असीमित रूप से निष्पादित करता है क्योंकि इस बात की कोई गारंटी नहीं है कि जब आप src संपत्ति सेट करते हैं तो छवि तुरंत लोड हो जाएगी। डेटा यूआरएल के साथ शायद यह तब से होगा जब इसे कुछ भी डाउनलोड करने की आवश्यकता नहीं है, लेकिन मैंने कोशिश नहीं की है।

कॉलबैक परिणामस्वरूप छवि को डेटा यूआरएल के रूप में पारित कर दिया जाएगा। ध्यान दें कि परिणामी छवि एक पीएनजी होगी, क्योंकि toDataURL के क्रोम के कार्यान्वयन से छवि/जेपीईजी का समर्थन नहीं होता है।

function resizeImage(url, width, height, callback) { 
    var sourceImage = new Image(); 

    sourceImage.onload = function() { 
     // Create a canvas with the desired dimensions 
     var canvas = document.createElement("canvas"); 
     canvas.width = width; 
     canvas.height = height; 

     // Scale and draw the source image to the canvas 
     canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height); 

     // Convert the canvas to a data URL in PNG format 
     callback(canvas.toDataURL()); 
    } 

    sourceImage.src = url; 
} 

Answer 2

प्रदर्शन के मुद्दों का सवाल है पर http://code.google.com/chrome/extensions/tabs.html

"हाल ही में बंद टैब" क्रोम एक्सटेंशन पर http://en.wikipedia.org/wiki/Data_URI_scheme

क्रोम एक्सटेंशन एपीआई पर योजना, शायद कैनवास टैग मदद कर सकता है? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

यदि आप छवि लोड करते हैं, तो इसे drawImage के साथ प्रदर्शित करें और फिर इसे छोड़ने का प्रयास करें, आप सफल हो सकते हैं। लेकिन मुझे यकीन नहीं है कि आकार बदलने वाली फ़ाइल को सहेजने के लिए एक छवि के रूप में कैनवास को क्रमबद्ध कैसे करें ...