हम कैन के माध्यम से हैबर को "स्पॉट" में बदलते हैं

शुभ दोपहर, हबर के प्रिय आगंतुक।

मैं आपके साथ अपनी छोटी स्क्रिप्ट साझा करना चाहता हूं जिसका उपयोग लगभग किसी भी साइट पर बुकमार्क तकनीक का उपयोग करके किया जा सकता है। इसलिए ...

यह क्या है

जैसा कि आप शीर्षक से देख सकते हैं, यह "टैग" का एक खेल है। इस खेल की ख़ासियत यह है कि यह पृष्ठ की वर्तमान दृश्य छवि का उपयोग करता है। विकास के दौरान, हमने निकोलस वॉन हर्टजेन (निकलास वॉन हर्टजन) की html2canvas लाइब्रेरी का उपयोग किया, जो आपको उपयोगकर्ता पक्ष में ब्राउज़र में स्क्रीनशॉट लेने, और परिणाम को कैनवास में रखने की अनुमति देता है। यह इस छवि (या इसका एक हिस्सा) है जो "टैग" के खेल क्षेत्र के लिए स्रोत होगा।

यह क्यों है?

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

यह कैसे काम करता है?

जैसा कि पहले ही उल्लेख किया गया है, उपयोगकर्ता के ब्राउज़र में स्क्रीनशॉट बनाने के लिए गेम html2canvas लाइब्रेरी का उपयोग करता है। पुस्तकालय शुद्ध जावास्क्रिप्ट में लिखा गया है, लेकिन इसमें एक jQuery प्लगइन शामिल है, जिसका मैंने उपयोग किया था।

पुस्तकालय का मूल उपयोग अत्यंत सरल है:

$(element).html2canvas({
onrendered: function(canvas) {
// ...
}
});


नव निर्मित कैनवास को कॉलबैक फ़ंक्शन के पैरामीटर के रूप में पारित किया जाता है।

मेरे द्वारा बनाई गई स्क्रिप्ट अनिवार्य रूप से एक jQuery प्लगइन है। इसे कॉल करना बहुत सरल है:

$('body').puzzle15({
tileCount: 4
});


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

मुझे यह बताने में बहुत कुछ दिखाई नहीं देता कि "टैग" की व्यवस्था कैसे की गई है, क्योंकि यह पहले से ही हैबे पर था, और इसकी विषय में बहुत कम प्रासंगिकता है। खैर, सामान्य तौर पर, कोड काफी सरल होता है, जिसमें छोटी टिप्पणियां होती हैं, इसलिए समझने में कोई समस्या नहीं होनी चाहिए। फिर भी, मैं सवालों के जवाब देने और रचनात्मक चर्चा में भाग लेने के लिए तैयार हूं।

मैं पहले से ही खेलना चाहता हूं। कहां धकेलना है?

इस गेम को स्थापित करने के लिए, आपको यहां जाना होगा और बुकमार्क बार में लिंक html2canvas + पहेली 15 को स्थानांतरित करना होगा। आपके द्वारा इसे स्थानांतरित करने के बाद, किसी भी साइट को खोलें (उदाहरण के लिए, habrahabr.ru) और बुकमार्क बुक करें। दिखाई देने वाली विंडो में, आपको फ़ील्ड आयाम दर्ज करने की आवश्यकता होगी।
मैं ओपेरा उपयोगकर्ताओं को तुरंत चेतावनी देना चाहता हूं : लंबे पृष्ठों पर, ओपेरा स्क्रीनशॉट लेते समय बहुत धीमा हो जाता है, लेकिन फिर भी यह सही ढंग से काम करता है। मैंने एफएफ, क्रोम, सफारी, आईई 9 और ओपेरा में परीक्षण किया, लेकिन बाद में केवल इस तरह की समस्या थी। मुझे लगता है कि यदि पुस्तकालय केवल आंशिक स्क्रीनशॉट ले सकता है, तो फ्रीज़ से बचा जा सकता है। सामान्य तौर पर, अगर मैंने आपको चेतावनी दी है।

स्रोत कोड कहाँ से डाउनलोड करें?

बुकमार्क सहित पूरा पुरालेख यहाँ डाउनलोड किया जा सकता है ।
Html2canvas लाइब्रेरी सोर्स गिथब पर डाउनलोड किए जा सकते हैं।

अपडेट: मैंने देखा कि स्क्रिप्ट यैंडेक्स पर काम नहीं करती है। इस और अन्य साइटों की समस्याओं से बचने के लिए, मैंने स्क्रिप्ट में छवियों की समीपता को बंद कर दिया, जो एक ही मूल नीति के अनुरूप नहीं हैं। तथ्य यह है कि प्रॉक्सी को html2canvas डेवलपर पक्ष पर डिफ़ॉल्ट रूप से संसाधित किया जाता है, और स्क्रिप्ट कभी-कभी वहां क्रैश हो जाती है।
upd2: कुछ पृष्ठ जो बहुत लंबे हैं, उनमें NS_ERROR_OUT_OF_MEMORY त्रुटि हो सकती है: घटक ने विफलता कोड दिया: 0x8007000e (NS_ERROR_OUT_OF_MEMORY [nsIDOMHTMLCanvasElement.height]। काश, चूंकि शरीर में क्षेत्र को सीमित करने का कोई तरीका नहीं है, इसलिए त्रुटियों से बचा नहीं जा सकता है।