Динамически сгенерированный значок

Можно ли использовать только 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: Оригинальное изображение Favicon
-: красное сгенерированное изображение с номером
1: белый текст

Идеи:

Canvas?
Данные Uri's?

Ответ 1

EDIT: он работает с

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

в браузере и увидеть его в действии.

Ответ 2

Вы можете взглянуть на этот вопрос, в котором обсуждается, как динамически менять значки. Также вот сайт, который утверждает, что играет в игру в значке, используя только JavaScript, холст и URI данных, которые должны работать во всех современные браузеры, кроме IE. Не уверен, что это выполнит ваши требования или нет, но вы можете попробовать обратное проектирование, как это работает.

Здесь SO answer, в котором объясняется, как использовать элемент canvas для чтения данных favicon и получения данных изображения, которые затем могут быть изменены и скомпонованы в новый значок.

Ответ 3

Я не знаю, как все это сделать в браузере, но было бы легко иметь конечную точку сервера, которая принимала бы параметры в URL-адресе и возвращала скомпилированный значок. Затем Javascript может изменить URL-адрес favicon, чтобы получить желаемое изображение.

Ответ 4

favicon.js делает именно это. Эта библиотека может отображать счетчик в правом нижнем углу значка, среди других функций.