Home Explore Help
Register Sign In
caner
/
custom-favicon
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init demo
Signed-off-by: Caner <5658514@qq.com>

Caner 2 years ago
parent
b6c4de4d24
commit
30e0e01595
4 changed files with 136 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      app.ico
  2. 20 0
      index.html
  3. 100 0
      main.js
  4. 16 0
      package.json

BIN
app.ico
View File


+ 20 - 0
index.html
View File 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="zh">
 
+
 
+<head>
 
+  <meta charset="UTF-8" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+  <link rel="shortcut icon" href="app.ico" type="image/x-icon" />
 
+  <title>用完幅度萨芬士大夫</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    test
 
+  </div>
 
+
 
+  <script src="main.js"></script>
 
+
 
+</body>
 
+
 
+</html>

+ 100 - 0
main.js
View File 

@@ -0,0 +1,100 @@
 
+class WebTileService {
 
+    #canvas = null;
 
+    #title = document.title;
 
+    #config = { Background: 'red', Color: 'white', Type: 'scroll', Time: 500 };
 
+    #ctx = null;
 
+    #linkTag = null;
 
+    #img = null;
 
+    #timer = null;
 
+
 
+    constructor(Config) {
 
+        if (Config instanceof Object && Object.keys(Config).length) {
 
+            this.#config = { ...this.#config, ...Config }
 
+        }
 
+        this.#init()
 
+    }
 
+
 
+    async #init() {
 
+        const icon = document.querySelectorAll('link[rel~=shortcut]')[0]
 
+        // img
 
+        const img = new Image()
 
+        img.style.width = `32px`
 
+        img.style.height = `32px`
 
+        img.crossOrigin = 'Anonymous'
 
+        img.src = icon.href
 
+        // canvas 初始化
 
+        const canvas = document.createElement('canvas')
 
+        canvas.height = 32
 
+        canvas.width = 32
 
+        this.#canvas = canvas
 
+        const ctx = canvas.getContext('2d')
 
+        this.#ctx = ctx
 
+        // 画底图
 
+        const res = await new Promise((res, rej) => {
 
+            img.onload = () => res(true)
 
+            img.onerror = () => rej(false)
 
+        })
 
+        if (res) ctx.drawImage(img, 0, 0, 32, 32)
 
+        this.#img = img
 
+        // dom 初始化
 
+        const head = document.getElementsByTagName('head')[0]
 
+        const linkTag = document.createElement('link')
 
+        linkTag.setAttribute('rel', 'shortcut icon')
 
+        linkTag.setAttribute('type', 'image/x-icon')
 
+        linkTag.setAttribute('href', canvas.toDataURL('image/png'))
 
+        linkTag.setAttribute('id', 'RESETLinkICON')
 
+        head.removeChild(icon)
 
+        head.appendChild(linkTag)
 
+        this.#linkTag = linkTag
 
+    }
 
+
 
+    setTitle(text) {
 
+        if (!text) return
 
+        const { Type, Time } = this.#config
 
+        let title = ''
 
+        let scrollTitle = ''
 
+        if (this.#timer) clearInterval(this.#timer)
 
+        this.#timer = setInterval(() => {
 
+            switch (Type) {
 
+                case 'scroll':
 
+                    if (!scrollTitle || !scrollTitle.slice(1)) {
 
+                        document.title = text
 
+                        scrollTitle = text
 
+                    } else {
 
+                        scrollTitle = scrollTitle.slice(1)
 
+                        document.title = scrollTitle
 
+                    }
 
+                    break;
 
+                case 'flicker':
 
+                    document.title = title === document.title ? text : title
 
+                default:
 
+                    clearInterval(this.#timer)
 
+                    document.title = this.#title
 
+                    break;
 
+            }
 
+        }, Time);
 
+    }
 
+
 
+    setNum(num) {
 
+        if (!(num instanceof Number) || !num || !this.#ctx || !this.#linkTag) return
 
+        const { Background, Color } = this.#config
 
+        this.#ctx.arc(21, 21, 11, 0, 2 * Math.PI)
 
+        this.#ctx.fillStyle = Background
 
+        this.#ctx.fill();
 
+        this.#ctx.textAlign = 'center'
 
+        this.#ctx.font = 'normal bold 16px Aria'
 
+        this.#ctx.fillStyle = Color
 
+        this.#ctx.fillText(num > 99 ? '･･' : num, 21, 27)
 
+        if (num <= 100) this.#linkTag.setAttribute('href', this.#canvas.toDataURL('image/png'));
 
+    }
 
+
 
+    clearNum() {
 
+        this.#ctx.drawImage(this.#img, 0, 0, 32, 32)
 
+        this.#linkTag.setAttribute('href', this.#canvas.toDataURL('image/png'));
 
+    }
 
+
 
+    clearTitle() {
 
+        clearTimeout(this.#timer)
 
+        document.title = this.#title
 
+    }
 
+}

+ 16 - 0
package.json
View File 

@@ -0,0 +1,16 @@
 
+{
 
+  "name": "custom-favicon",
 
+  "version": "1.0.0",
 
+  "description": "自定义浏览器标题样式",
 
+  "main": "main.js",
 
+  "scripts": {
 
+    "dev": "anywhere -p 4578",
 
+    "test": "echo \"Error: no test specified\" ; exit 1"
 
+  },
 
+  "repository": {
 
+    "type": "git",
 
+    "url": "https://git.caner.top/Caner/custom-favicon.git"
 
+  },
 
+  "author": "Caner",
 
+  "license": "ISC"
 
+}