Динамически генерируемый значок - PullRequest
Новая
       19

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

41 голосов
/ 06 августа 2011

Можно ли было бы использовать только 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-=

map:=: белый фонx: оригинальное изображение Favicon-: сгенерированное красным изображение с номером1: белый текст

Идеи:

  • Холст?
  • Данные Ури?

Ответы [ 4 ]

53 голосов
/ 06 августа 2011

РЕДАКТИРОВАТЬ: все работает с 

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 и вставить его: 

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

15 голосов
/ 06 августа 2011

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

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

4 голосов
/ 06 августа 2011

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

0 голосов
/ 29 сентября 2017

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

enter image description here

...