वेब पेज (क्लाइंट पर) की पृष्ठभूमि में एक जटिल भूलभुलैया बनाएँ

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

तुरंत एक आरक्षण करें, जो सबसे अधिक संभावना है, शोधन के बिना, वे सभी आधुनिक ब्राउज़रों (केवल क्रोम 24 और लिनक्स के तहत एफएफ 16 में परीक्षण किए गए) में काम नहीं करेंगे।

पृष्ठभूमि छवि

जैसा कि आप जानते हैं , CSS3 में पृष्ठभूमि-छवि आपको कई पृष्ठभूमि छवि फ़ाइलों को निर्दिष्ट करने की अनुमति देती है, और पृष्ठभूमि-स्थिति में उनके निर्देशांक। इसलिए, केवल दो छोटी तस्वीरों को "शिफ्टिंग" करके, आप एक यादृच्छिक भूलभुलैया उत्पन्न कर सकते हैं, उदाहरण के लिए, इस कोड के साथ:

var images = []; //    var positions = []; //  var l = 26; //   (  ) var src = ['1.png', '2.png']; var body = document.getElementsByTagName('body')[0]; var w = body.scrollWidth/l; var h = body.scrollHeight/l; for(var i=0;i<h;i++){ for(var j=0;j<w;j++){ images.push('url('+src[Math.round(Math.random())]+')'); //    positions.push(j*l+'px '+i*l+'px'); //    } } //    body.style.backgroundImage = images.join(', '); body.style.backgroundPosition = positions.join(', '); body.style.backgroundRepeat = "no-repeat"; 

मुझे लगता है कि यह अनुमान लगाना मुश्किल नहीं है कि इस तरह की भूलभुलैया डायनामिक रूप से अपडेट करने के लिए काफी सरल है, उदाहरण के लिए, कुछ इस तरह:

  for(var i=0;i<images.length*0.05;i++){ images[Math.floor(images.length*Math.random())]=('url('+src[Math.round(Math.random())]+')'); } body.style.backgroundImage = images.join(', '); body.style.backgroundPosition = positions.join(', '); body.style.backgroundRepeat = "no-repeat"; 

इस पद्धति का एक गंभीर माइनस यह है कि यह एक तत्व को अशोभनीय आकारों में ले जाता है, इसके अलावा, यह काफी धीमा है (यह उसी कारण से लगता है)।

कैनवास + बूँद

थोड़ा सोचने के बाद, मैंने फैसला किया कि आप कैनवस + ब्लॉब पर एक कार्यान्वयन कर सकते हैं। नीचे की रेखा कुछ इस तरह है:

• एक कैनवास बनाएं और उसके आकार को उस तत्व के आकार के बराबर सेट करें जिसके लिए हम पृष्ठभूमि बनाते हैं;
• चित्र के साथ कैनवास भरें;
• जावास्क्रिप्ट-कैनवस-से-बूँद का उपयोग करके हम सामग्री को बूँद में परिवर्तित करते हैं;
• और URL.createObjectURL का उपयोग करके हमें ब्लॉब URL मिलता है।

परिणामी URL को body.style.backgroundImage गुण को सौंपा गया है:

  var body = document.getElementsByTagName('body')[0]; canvas.toBlob(function(blob){ var url = URL.createObjectURL(blob); body.style.backgroundImage = "url('" + url + "')"; }) 

यहां सच्चाई बिना कमियां के नहीं है। बैकग्राउंड को अपडेट करते समय, बैकग्राउंड पल भर में गायब हो जाता है। हालांकि यह काफी आसानी से तय किया जाता है, उदाहरण के लिए, लोड समय पर चित्रों को ओवरले करके:

  var url = URL.createObjectURL(blob); body.style.backgroundImage += ", url('" + url + "')"; body.style.backgroundRepeat = "no-repeat"; setTimeout(function(){ body.style.backgroundImage = "url('" + url + "')"; },200); 

उदाहरण 1 (पृष्ठभूमि-छवि)
उदाहरण 2 (कैनवास + बूँद)

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

ps मुझे लेख लिखने का लगभग कोई अनुभव नहीं है, इसलिए अगर कुछ गलत है तो ज्यादा शपथ न लें।