गतिशील रूप से जेनरेट किया गया फेविकॉन

क्या यह केवल जावास्क्रिप्ट और एचटीएमएल का उपयोग करके एक फेविकॉन उत्पन्न करने के लिए संभव है, वर्तमान पृष्ठ के फेविकॉन को पृष्ठभूमि के रूप में, और अग्रभूमि में एक यादृच्छिक संख्या का उपयोग करना संभव होगा?गतिशील रूप से जेनरेट किया गया फेविकॉन

उदाहरण के लिए, मान लीजिए कि वर्तमान फ़ेविकॉन इस जैसा दिखता है:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X============X==== 
====X============X==== 
====XXXXXXXXXXXXXX==== 
======================

यदि संभव हो तो

, मैं कैसे यह केवल जावास्क्रिप्ट और HTML का उपयोग कर यह करने के लिए कुछ इसी तरह देखने के लिए मिलेगा:

====================== 
====XXXXXXXXXXXXXX==== 
====X================= 
====X================= 
====X=====XXXXXXXX==== 
====X=========--111--= 
====X=========--1-1--= 
====XXXXXXXXXX----1--= 
==============--1111-=

नक्शा:
=: सफेद पृष्ठभूमि
x: मूल फ़ेविकॉन छवि
-: सफेद पाठ

विचार::

कैनवास लाल एक नंबर
1 के साथ छवि उत्पन्न?
डेटा उरी का?

स्रोत

2011-08-06 Shaz

वाह, 1 की वास्तव में लाल कर रहे हैं ... चाहते हैं मैं चाहता हूँ हालांकि विपरीत है। '1'' सफेद होगा जबकि '-' लाल होगा – Shaz

क्या आप इस नए छवि के साथ अपने ब्राउज़र पर उपयोगकर्ता के वर्तमान फेविकॉन को संशोधित करना चाहते हैं, या इसे कहीं स्क्रीन पर प्रदर्शित करना चाहते हैं? – mellamokb

@mellamokb इसे – Shaz

संपादित करें: यह

var canvas = document.createElement('canvas'); 
    canvas.width = 16;canvas.height = 16; 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    img.src = '/favicon.ico'; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     ctx.fillStyle = "#F00"; 
     ctx.fillRect(10, 7, 6, 8); 
     ctx.fillStyle = '#FFFFFF'; 
     ctx.font = 'bold 10px sans-serif'; 
     ctx.fillText('2', 10, 14); 

     var link = document.createElement('link'); 
     link.type = 'image/x-icon'; 
     link.rel = 'shortcut icon'; 
     link.href = canvas.toDataURL("image/x-icon"); 
     document.getElementsByTagName('head')[0].appendChild(link); 
    }

के साथ काम मिल गया तुम वास्तव में क्रोम चला सकते हैं और इस पेस्ट: ब्राउज़र में

javascript: var canvas = document.createElement('canvas');canvas.width = 16;canvas.height = 16;var ctx = canvas.getContext('2d');var img = new Image();img.src = '/favicon.ico';img.onload = function() {ctx.drawImage(img, 0, 0);ctx.fillStyle = "#F00";ctx.fillRect(10, 7, 6, 8);ctx.fillStyle = '#FFFFFF';ctx.font = 'bold 10px sans-serif';ctx.fillText('2', 10, 14);var link = document.createElement('link');link.type = 'image/x-icon';link.rel = 'shortcut icon';link.href = canvas.toDataURL("image/x-icon");document.getElementsByTagName('head')[0].appendChild(link);}

और कार्रवाई में इसे देख।

enter image description here

स्रोत

2011-08-06 01:39:24 Joe

कुछ चेतावनी: जैसा कि समझाया गया है [http://stackoverflow.com/questions/260857/changing-website-favicon- गतिशील रूप से), यह सभी ब्राउज़रों पर काम नहीं करेगा। यदि फेविकॉन किसी दूसरे डोमेन से लोड किया गया है तो यह भी असफल हो जाएगा - यह प्रश्न देखें (http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security- अपवाद) –

@Yi: एटीएम, इसका उपयोग केवल Google क्रोम और कुछ पृष्ठों पर किया जाएगा। हालांकि, आप मेरे द्वारा प्रदान किए गए लिंक के साथ सहायक से अधिक उपयोगी रहे हैं। धन्यवाद! – Shaz

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

मुझे ब्राउज़र में यह सब करने के बारे में पता नहीं है, लेकिन सर्वर अंतराल होना आसान होगा जो यूआरएल में मानकों को स्वीकार करता है और एक रचनात्मक फेविकॉन लौटाता है। फिर जावास्क्रिप्ट उस छवि को प्राप्त करने के लिए फेविकॉन यूआरएल को संशोधित कर सकता था।

स्रोत

2011-08-06 01:26:13

को शामिल करने के लिए संशोधित करें, अफसोस की बात है, जब तक कोई सार्वजनिक सर्वर न हो, जो इस तरह से कुछ मुफ्त में सेवा करेगा, इस समय एक सर्वर विकल्प से बाहर है। :( – Shaz

Google का ऐप इंजन एक नि: शुल्क सार्वजनिक सर्वर है जो इसे सेवा दे सकता है ... –

वैसे जो मैं प्राप्त कर रहा हूं वह है कि मैं इसे अंतिम ब्राउज़र के रूप में सर्वर का उपयोग करके ब्राउज़र में ही करना चाहता हूं;) – Shaz

आप this question पर एक नज़र डाल सकते हैं, जो चर्चा करता है कि फेविकॉन को गतिशील रूप से कैसे बदला जाए। इसके अलावा here is a site जो केवल जावास्क्रिप्ट, कैनवास और डेटा यूआरआई का उपयोग करके फेविकॉन में एक गेम खेलने का दावा करता है, जो आईई को छोड़कर सभी आधुनिक ब्राउज़रों में काम करना चाहिए। सुनिश्चित नहीं है कि यह आपकी आवश्यकताओं को पूरा करेगा या नहीं, लेकिन आप रिवर्स इंजीनियरिंग को आजमा सकते हैं कि यह कैसे काम करता है।

यहां एक SO answer है जो बताता है कि फेविकॉन डेटा को पढ़ने और छवि डेटा प्राप्त करने के लिए कैनवास तत्व का उपयोग कैसे करें, जिसे तब संशोधित किया जा सकता है और एक नए आइकन में बनाया जा सकता है।

स्रोत

2011-08-06 01:27:07 mellamokb

favicon.js वास्तव में ऐसा करता है। यह लाइब्रेरी अन्य सुविधाओं के बीच फेविकॉन के निचले दाएं कोने में एक काउंटर प्रदर्शित कर सकती है।