Динамический значок с использованием изображений, аналогичный Gmail, с добавлением счетчика - PullRequest
Новая
       15

Динамический значок с использованием изображений, аналогичный Gmail, с добавлением счетчика

37 голосов
/ 09 июня 2011

Я пытался выяснить это, глядя на исходный код, но я не мог понять это.

Я хотел бы знать, как сделать динамический значок со счетчиком, как в Gmail.

enter image description here

Есть идеи, как это сделать?

1 Ответ

59 голосов
/ 09 июня 2011

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

Код из вышеуказанной ссылки.

Разметка 

<link id="favicon" rel="icon" type="image/png" href="image.png" />

JS 

  (function () {
    var canvas = document.createElement('canvas'),
        ctx,
        img = document.createElement('img'),
        link = document.getElementById('favicon').cloneNode(true),
        day = (new Date).getDate() + '';

    if (canvas.getContext) {
      canvas.height = canvas.width = 16; // set the size
      ctx = canvas.getContext('2d');
      img.onload = function () { // once the image has loaded
        ctx.drawImage(this, 0, 0);
        ctx.font = 'bold 10px "helvetica", sans-serif';
        ctx.fillStyle = '#F0EEDD';
        if (day.length == 1) day = '0' + day;
        ctx.fillText(day, 2, 12);
        link.href = canvas.toDataURL('image/png');
        document.body.appendChild(link);
      };
      img.src = 'image.png';
    }

    })();

Редактировать

Также должен быть установлен набор изображений.

...