使用类似于 Gmail 的图像处理的动态图标添加计数 [英] Dynamic favicon using image manipulation similar to Gmail adding a count

问题描述

我试图通过查看源代码来弄清楚，但我无法弄清楚.

I tried to figure it out looking at the source code but I couldn't figure it out.

我想知道如何像 Gmail 那样制作带有计数的动态网站图标.

I would like to know how to make a dynamic favicon with a count like Gmail does.

知道如何做到这一点吗?

Any idea on how to do this?

推荐答案

您可以使用 canvas 元素制作图像，然后只需替换当前的 favicon.查看以下链接以获得有关它的很好的解释.参考

You can make an image with the canvas element, and then just replace the current favicon. Check out the following link for a good explanation on it. Reference

代码来自上述参考.

标记

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

编辑

还必须设置图像.

这篇关于使用类似于 Gmail 的图像处理的动态图标添加计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！