動的に生成されたfavicon

Question

JavaScriptとHTMLのみを使用して、現在のページのファビコンを背景として使用し、前景の乱数を動的に生成することはできますか？

例えば、現在のファビコンはこのようになります言うことができます：

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

可能であれば、どのように私はそれが唯一のJavaScriptとHTMLを使ってこれに似た何かを探すようになるだろう：

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

マップ：
=：白い背景
x：オリジナルファビコンの画像
-：赤は数
1で画像を生成：ホワイトテキストを

アイデア：

• キャンバス？
• データUri's？

Answer 1

EDIT：ブラウザに

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);} 

とアクションでそれを参照してください。それはあなたが実際にChromeを実行し、これを貼り付けることができ

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); 
    } 

と協力しました。

Answer 2

ブラウザですべてを行うことについてはわかりませんが、URLにパラメータを受け入れ、作成されたfaviconを返すサーバーエンドポイントを持つことは簡単です。その後、Javascriptはfavicon URLを変更して、必要なイメージを取得できます。

Answer 3

faviconを動的に変更する方法については、this questionをご覧ください。またhere is a siteは、JavaScript、キャンバス、およびデータURIを使用してfaviconでゲームをプレイすると主張しています。これはIEを除くすべての最新のブラウザで機能するはずです。それが要件を満たしているかどうかは分かりませんが、リバースエンジニアリングの仕組みを試すことができます。

キャンバス要素を使用してファビコンデータを読み込んでイメージデータを取得し、新しいアイコンに変更して合成する方法について説明したSO answerです。

Answer 4

favicon.jsまさにこれを行います。このライブラリは、他の機能の中で、ファビコンの右下にカウンターを表示することができます。