动态生成的图标 [英] Dynamically generated favicon
问题描述
是否可以使用JavaScript和HTML动态生成图标,使用当前页面的图标作为背景,以及前景中的随机数?
Would it be possible using only JavaScript and HTML to dynamically generate a favicon, using the current page's favicon as a background, and a random number in the foreground?
例如,假设当前的favicon看起来类似于:
For example, lets say the current favicon looks similar to this:
======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X============X====
====X============X====
====XXXXXXXXXXXXXX====
======================
如果可能的话,我怎样才能使用JavaScript和HTML看到类似的内容:
If possible, how would I get it to look something similar to this using only JavaScript and HTML:
======================
====XXXXXXXXXXXXXX====
====X=================
====X=================
====X=====XXXXXXXX====
====X=========--111--=
====X=========--1-1--=
====XXXXXXXXXX----1--=
==============--1111-=
地图:
=
:白色背景
x
:原始Favicon图片
-
:红色生成的图像带数字
1
:白色文字
map:
=
: white background
x
: Original Favicon image
-
: Red generated image with a number
1
: White text
想法:
- 画布?
- 数据Uri?
推荐答案
编辑:搞定了
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并将其粘贴:
You can actually run chrome and paste this:
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);}
进入浏览器并且看到它在行动。
into the browser and see it in action.
这篇关于动态生成的图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!