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

问题描述

我想知道如何使用动态网站图标像Gmail一样。

>

有关如何执行此操作的任何想法吗？

解决方案

c $ c> canvas 元素，然后只是替换当前的favicon。查看以下链接以获得更好的解释。
参考

代码来自上述引用。

标记

 < link id =favicon =icontype =image / pnghref =image.png/> 
  

JS

 （function（）{
 var canvas = document.createElement（'canvas'），
 ctx，
 img = document.createElement '），
 link = document.getElementById（'favicon'）。cloneNode（true），
 day =（new Date）.getDate（）+''; 
 
 if （canvas.getContext）{
 canvas.height = canvas.width = 16; //设置大小
 ctx = canvas.getContext（'2d'）; 
 img.onload = function ）{//图片加载后
 ctx.drawImage（this，0，0）; 
 ctx.font ='bold 10pxhelvetica，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'; 
} 
 
}）（）; 
  

编辑

也必须设置一个图片。

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

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

Any idea on how to do this?

解决方案

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

Code is from the above reference.

Markup

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

    })();

Edit

Must have an image set as well.

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