社区精选｜使用 SVG 生成带标识的 favicon

百度首页

今天小编为大家带来的是社区作者 XboxYan 的文章，让我们一起来学习使用 SVG 生成带标识的 favicon。

之前做了一个 Chrome 插件，可以根据地址的不同生成不同的图标，这样可以很方便的区分不同的开发环境，效果如下：

主要实现过程其实不复杂，首先获取网站 favicon，然后给 favicon 添加标识，重新绘制生成就行了。

其中，这里的图标就是通过 SVG 生成的，下面看看具体实现吧。

一、favicon 的获取方式

想知道获取方式，可以先了解设置方式。

一般有两种方式可以设置网站的 favicon。

第一种，通过 link 标签设置（需要rel="icon"属性）

第二种，直接在网站根目录放一张favicon.ico（必须是这个名称，浏览器默认的），html 中什么也不用设置

- 网站目录 index.html favicon.ico

如果以上都没有设置，那么大概率会看到以下错误：

了解这些，获取就简单了，先通过link获取，只要rel包含icon就行了

const link = document.querySelector('link[rel~="icon"]');

如果找不到，可以请求/favicon.ico，这里直接添加一个link

functiongetLink(){ const link = document.querySelector('link[rel~="icon"]');if (link) {return link } else { const link = document.createElement('link'); link.rel = "icon"; link.href = "/favicon.ico" document.head.append(link);return link }}

这样获取的link就保证存在了，然后就是绘制

二、利用 canvas 进行绘制

由于需要合成图像，所以需要先绘制原有图像。提到图像绘制，可以想到 canvas 绘制，只需要一点点 canvas 基础知识就足够了。具体实现如下：

const canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),img = new Image();img.crossOrigin = 'anonymous';img.onload = () => { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0, canvas.width, canvas.height);let dataURL = canvas.toDataURL("image/png"); resolve(dataURL); canvas = null;};img.src = url;

由于存在/favicon.ico没有设置的情况，所以需要在 img 加载失败的时候给一张默认图

img.onerror = () => { resolve("默认图base64");}

这样就能获取到 favicon 的图像信息了

三、利用 SVG 进行图片合成

在上面的基础上，其实可以继续通过 canvas 进行绘制，再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制，有以下一些优点

成本更低，比 canvas 更易理解灵活性高，可以通过 CSS 进行一些样式控制

首先，我们可以在 HTML 中自由的、像正常网页开发一样，绘制这样一个布局，相信没有什么难度

<body> <strong>local</strong> <img src='xxx.png'></body>

由于宽度有限，所以需要强制文本换行，超出隐藏，关键样式如下：

strong{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); text-transform: uppercase; background-color: orange; color: #fff; padding: 0px 2px; border-radius: 2px; font-size: 12px; box-sizing: border-box; max-width: 100%; width: max-content; height: 16px; line-height: 16px; word-break: break-all; overflow: hidden;}

接着，将这一段 html 放入 foreignObject标签中，关于 foreignObject 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用，在这里，你可以简单理解为是可以包含 HTML 的标签，而 SVG 本身也是一种图片，这样就达到了合成图像的目的。