瀏覽器標簽頁favicon設定數字角標

不管是在B/C端系統中，例如具有審批流或者購物網站的訂單頁面，我們可以將當前待辦數或者用戶的訂單數顯示到瀏覽器的標簽頁圖示上，雖然只是一個小小的功能，但是也能讓系統顯得與眾不同，更加人性化 如下圖瀏覽器標簽頁數字角標

安裝 yarn add favico.js -S

拿常用的vue專案舉例，一般情況下，我們整個系統中只有部分頁面需要顯示角標的需求，其他頁面是不需要顯示的，在vue框架中如何實作？那我們就會用到vuex了

// store.js
import Vue from 'vue'
import VueX from 'vueX'
Vue.use(Vuex)
const Favico = require('favico.js')
const store = new Vuex.Store({
    state: {
        favico: new Favico({animation:'none'})
    },
    mutations: {
        setCount(state,num) {
            state.favico.badge(num)
        },
        reset(state) {
            state.favico.reset()
        }
   }
})
export default store


// router.js   因為只需要某些頁面顯示角標 所以我們需要在進入頁面前，在路由衛士做重置處理
import store from './store.js'
import Router from 'vue-router'
router.beforeEach((to,from,next)=>{
        store.commit('reset')
        next()
})

// 顯示角標頁面
<template>
    <div>demo</div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
    mounted() {
        this.setCount(3)
    },
    methods: {
        ...mapMutations(['setCount'])
    }
}
</script>

具體如何使用，可參考favico.js代碼用法，也可參考github中favico.js的如下部分原始碼

例如該方法需要傳入圖片dom元素    
/**
		 * Set image as icon  設定影像
		 */
		var image = function (imageElement) {
			_readyCb = function () {
				try {
					var w = imageElement.width;
					var h = imageElement.height;
					var newImg = document.createElement('img');
					var ratio = (w / _w < h / _h) ? (w / _w) : (h / _h);
					newImg.setAttribute('crossOrigin', 'anonymous');
					newImg.onload=function(){
						_context.clearRect(0, 0, _w, _h);
						_context.drawImage(newImg, 0, 0, _w, _h);
						link.setIcon(_canvas);
					};
					newImg.setAttribute('src', imageElement.getAttribute('src'));
					newImg.height = (h / ratio);
					newImg.width = (w / ratio);
				} catch (e) {
					throw new Error('Error setting image. Message: ' + e.message);
				}
			};
			if (_ready) {
				_readyCb();
			}
		};



        /**
		 * Set video as icon  設定視頻
		 */
		var webcam = function (action) {
			//UR
			if (!window.URL || !window.URL.createObjectURL) {
				window.URL = window.URL || {};
				window.URL.createObjectURL = function (obj) {
					return obj;
				};
			}
			if (_browser.supported) {
				var newVideo = false;
				navigator.getUserMedia = navigator.getUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
				_readyCb = function () {
					try {
						if (action === 'stop') {
							_stop = true;
							icon.reset();
							_stop = false;
							return;
						}
						newVideo = document.createElement('video');
						newVideo.width = _w;
						newVideo.height = _h;
						navigator.getUserMedia({
							video: true,
							audio: false
						}, function (stream) {
							newVideo.src = URL.createObjectURL(stream);
							newVideo.play();
							drawVideo(newVideo);
						}, function () {
						});
					} catch (e) {
						throw new Error('Error setting webcam. Message: ' + e.message);
					}
				};
				if (_ready) {
					_readyCb();
				}
			}

		};

相關資料 github地址： https://github.com/ejci/favico.js