जावास्क्रिप्ट: कैनवास के बिना ImageData प्राप्त करना

Question

क्या ImageData एक छवि से ऑब्जेक्ट प्राप्त करना संभव है जो कैनवास पर नहीं है लेकिन डीओएम पेड़ में कहीं और सामान्य <img> के रूप में है?

यदि हां, तो कैसे?

Answer 1

आप स्मृति कैनवास में एक बनाने के लिए और फिर छवि इस कैनवास पर आकर्षित किया है:

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
var img = document.getElementById('myimg'); 
canvas.width = img.width; 
canvas.height = img.height; 
context.drawImage(img, 0, 0); 
var myData = context.getImageData(0, 0, img.width, img.height); 

लेकिन इस करता है, तो छवि किसी अन्य डोमेन से आता है काम नहीं करेगा। यह एक सुरक्षा प्रतिबंध है यदि आपके पास सर्वर का कोई नियंत्रण नहीं है (सावधान रहें कि यदि आप फ़ाइल के साथ अपनी एचटीएमएल फाइल खोलते हैं: // आपके पास बहुत से अतिरिक्त प्रतिबंध होंगे, http: // का उपयोग करें)

Answer 2

जैसा कि पहले से ही बताया गया है, कैनवास ImageData ऑब्जेक्ट्स बनाने के लिए एकमात्र समाधान प्रदान करता है।

तुम सच में छवि डेटा लोड करने के लिए (शायद हम LTE IE8 बात कर रहे हैं) कैनवास तत्व का उपयोग कर के खिलाफ सेट कर रहे हैं, तो आप हमेशा एक छवि वस्तु के स्रोत स्थान का उपयोग कर base64 छवि डेटा पार्स करने पर विचार कर सकते

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

यह मुश्किल है, लेकिन यदि आपको जरूरी है, तो संभावित रूप से छवियों को इस तरह से सरणी में पार्स कर सकते हैं।

https://github.com/devongovett/png.js/blob/master/png.js

यह दिखाता है कि png डेटा एक XHR अनुरोध के साथ डेटा लोड और पार्स करने के लिए। आंतरिक रूप से यह किसी अन्य चीजों के लिए कैनवास का उपयोग करता है लेकिन आप जिस सब्सक्राइब में रूचि रखते हैं वह कैनवास मुक्त है। आपको रुचि रखने वाले प्रत्येक छवि प्रारूप के लिए आपको एक समान कार्यान्वयन का पालन करना होगा।

मुझे यह उल्लेख करना चाहिए कि छवि पिक्सेल पढ़ने की सीमाएं सुरक्षा के मामले में समान हैं। आप कभी भी कैनवास के साथ या बिना किसी तीसरे पक्ष से आने वाले पिक्सेल पढ़ने में सक्षम नहीं होंगे। XMLHTTPRequest को क्रॉस-डोमेन नीतियों के शासन के लिए बाध्य किया जा रहा है। यह स्क्रिप्ट को तृतीय पक्ष सामग्री चोरी करने से रोकता है, जिसमें ऐसी छवियां शामिल होती हैं जिनमें संवेदनशील उपयोगकर्ता जानकारी हो सकती है।

यदि आपको किसी तृतीय पक्ष डोमेन (जिन्हें देखने के लिए प्रमाणीकरण की आवश्यकता नहीं है) पर छवियों को पढ़ने की आवश्यकता है, तो आपको अपने डोमेन पर एक छवि प्रॉक्सी सर्वर चलाया जाना चाहिए जो आपको उसी डोमेन पर छवियों का अनुरोध करने की अनुमति देता है। यदि आपको इसकी परेशानी पर जाने की आवश्यकता है, तो छवि डेटा को पहली जगह जेएसएस सरणी के रूप में प्रदान करना आसान हो सकता है।