favico是针对网页图标内容更改
favico.js源码
(function () {
var Favico = function (opt) {
"use strict";
opt = opt ? opt : {};
var _def = {
bgColor: "#d00",
textColor: "#fff",
fontFamily: "sans-serif",
fontStyle: "bold",
type: "circle",
position: "down",
animation: "slide",
elementId: false,
dataUrl: false,
win: window
};
var _opt, _orig, _h, _w, _canvas, _context, _img, _ready, _lastBadge, _running, _readyCb, _stop, _browser,
_animTimeout, _drawTimeout, _doc;
_browser = {};
_browser.ff = typeof InstallTrigger != "undefined";
_browser.chrome = !! window.chrome;
_browser.opera = !! window.opera || navigator.userAgent.indexOf("Opera") >= 0;
_browser.ie = false;
_browser.safari = Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") > 0;
_browser.supported = _browser.chrome || _browser.ff || _browser.opera;
var _queue = [];
_readyCb = function () {};
_ready = _stop = false;
var init = function () {
_opt = merge(_def, opt);
_opt.bgColor = hexToRgb(_opt.bgColor);
_opt.textColor = hexToRgb(_opt.textColor);
_opt.position = _opt.position.toLowerCase();
_opt.animation = animation.types["" + _opt.animation] ? _opt.animation : _def.animation;
_doc = _opt.win.document;
var isUp = _opt.position.indexOf("up") > -1;
var isLeft = _opt.position.indexOf("left") > -1;
if (isUp || isLeft) {
for (var i = 0; i < animation.types["" + _opt.animation].length; i++) {
var step = animation.types["" + _opt.animation][i];
if (isUp) {
if (step.y < .6) {
step.y = step.y - .4
} else {
step.y = step.y - 2 * step.y + (1 - step.w)
}
}
if (isLeft) {
if (step.x < .6) {
step.x = step.x - .4
} else {
step.x = step.x - 2 * step.x + (1 - step.h)
}
}
animation.types["" + _opt.animation][i] = step
}
}
_opt.type = type["" + _opt.type] ? _opt.type : _def.type;
_orig = link.getIcon();
_canvas = document.createElement("canvas");
_img = document.createElement("img");
if (_orig.hasAttribute("href")) {
_img.setAttribute("crossOrigin", "anonymous");
_img.onload = function () {
_h = _img.height > 0 ? _img.height : 32;
_w = _img.width > 0 ? _img.width : 32;
_canvas.height = _h;
_canvas.width = _w;
_context = _canvas.getContext("2d");
icon.ready()
};
_img.setAttribute("src", _orig.getAttribute("href"))
} else {
_img.onload = function () {
_h = 32;
_w = 32;
_img.height = _h;
_img.width = _w;
_canvas.height = _h;
_canvas.width = _w;
_context = _canvas.getContext("2d");
icon.ready()
};
_img.setAttribute("src", "")
}
};
var icon = {};
icon.ready = function () {
_ready = true;
icon.reset();
_readyCb()
};
icon.reset = function () {
if (!_ready) {
return
}
_queue = [];
_lastBadge = false;
_running = false;
_context.clearRect(0, 0, _w, _h);
_context.drawImage(_img, 0, 0, _w, _h);
link.setIcon(_canvas);
window.clearTimeout(_animTimeout);
window.clearTimeout(_drawTimeout)
};
icon.start = function () {
if (!_ready || _running) {
return
}
var finished = function () {
_lastBadge = _queue[0];
_running = false;
if (_queue.length > 0) {
_queue.shift();
icon.start()
} else {}
};
if (_queue.length > 0) {
_running = true;
var run = function () {
["type", "animation", "bgColor", "textColor", "fontFamily", "fontStyle"].forEach(function (a) {
if (a in _queue[0].options) {
_opt[a] = _queue[0].options[a]
}
});
animation.run(_queue[0].options, function () {
finished()
}, false)
};
if (_lastBadge) {
animation.run(_lastBadge.options, function () {
run()
}, true)
} else {
run()
}
}
};
var type = {};
var options = function (opt) {
opt.n = typeof opt.n === "number" ? Math.abs(opt.n | 0) : opt.n;
opt.x = _w * opt.x;
opt.y = _h * opt.y;
opt.w = _w * opt.w;
opt.h = _h * opt.h;
opt.len = ("" + opt.n).length;
return opt
};
type.circle = function (opt) {
opt = options(opt);
var more = false;
if (opt.len === 2) {
opt.x = opt.x - opt.w * .4;
opt.w = opt.w * 1.4;
more = true
} else if (opt.len >= 3) {
opt.x = opt.x - opt.w * .65;
opt.w = opt.w * 1.65;
more = true
}
_context.clearRect(0, 0, _w, _h);
_context.drawImage(_img, 0, 0, _w, _h);
_context.beginPath();
_context.font = _opt.fontStyle + " " + Math.floor(opt.h * (opt.n > 99 ? .85 : 1)) + "px " + _opt.fontFamily;
_context.textAlign = "center";
if (more) {
_context.moveTo(opt.x + opt.w / 2, opt.y);
_context.lineTo(opt.x + opt.w - opt.h / 2, opt.y);
_context.quadraticCurveTo(opt.x + opt.w, opt.y, opt.x + opt.w, opt.y + opt.h / 2);
_context.lineTo(opt.x + opt.w, opt.y + opt.h - opt.h / 2);
_context.quadraticCurveTo(opt.x + opt.w, opt.y + opt.h, opt.x + opt.w - opt.h / 2, opt.y + opt.h);
_context.lineTo(opt.x + opt.h / 2, opt.y + opt.h);
_context.quadraticCurveTo(opt.x, opt.y + opt.h, opt.x, opt.y + opt.h - opt.h / 2);
_context.lineTo(opt.x, opt.y + opt.h / 2);
_context.quadraticCurveTo(opt.x, opt.y, opt.x + opt.h / 2, opt.y)
} else {
_context.arc(opt.x + opt.w / 2, opt.y + opt.h / 2, opt.h / 2, 0, 2 * Math.PI)
}
_context.fillStyle = "rgba(" + _opt.bgColor.r + "," + _opt.bgColor.g + "," + _opt.bgColor.b + "," + opt.o +
")";
_context.fill();
_context.closePath();
_context.beginPath();
_context.stroke();
_context.fillStyle = "rgba(" + _opt.textColor.r + "," + _opt.textColor.g + "," + _opt.textColor.b + "," +
opt.o + ")";
if (typeof opt.n === "number" && opt.n > 999) {
_context.fillText((opt.n > 9999 ? 9 : Math.floor(opt.n / 1e3)) + "k+", Math.floor(opt.x + opt.w / 2),
Math.floor(opt.y + opt.h - opt.h * .2))
} else {
_context.fillText(opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * .15))
}
_context.closePath()
};
type.rectangle = function (opt) {
opt = options(opt);
var more = false;
if (opt.len === 2) {
opt.x = opt.x - opt.w * .4;
opt.w = opt.w * 1.4;
more = true
} else if (opt.len >= 3) {
opt.x = opt.x - opt.w * .65;
opt.w = opt.w * 1.65;
more = true
}
_context.clearRect(0, 0, _w, _h);
_context.drawImage(_img, 0, 0, _w, _h);
_context.beginPath();
_context.font = _opt.fontStyle + " " + Math.floor(opt.h * (opt.n > 99 ? .9 : 1)) + "px " + _opt.fontFamily;
_context.textAlign = "center";
_context.fillStyle = "rgba(" + _opt.bgColor.r + "," + _opt.bgColor.g + "," + _opt.bgColor.b + "," + opt.o +
")";
_context.fillRect(opt.x, opt.y, opt.w, opt.h);
_context.fillStyle = "rgba(" + _opt.textColor.r + "," + _opt.textColor.g + "," + _opt.textColor.b + "," +
opt.o + ")";
if (typeof opt.n === "number" && opt.n > 999) {
_context.fillText((opt.n > 9999 ? 9 : Math.floor(opt.n / 1e3)) + "k+", Math.floor(opt.x + opt.w / 2),
Math.floor(opt.y + opt.h - opt.h * .2))
} else {
_context.fillText(opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * .15))
}
_context.closePath()
};
var badge = function (number, opts) {
opts = (typeof opts === "string" ? {
animation: opts
} : opts) || {};
_readyCb = function () {
try {
if (typeof number === "number" ? number > 0 : number !== "") {
var q = {
type: "badge",
options: {
n: number
}
};
if ("animation" in opts && animation.types["" + opts.animation]) {
q.options.animation = "" + opts.animation
}
if ("type" in opts && type["" + opts.type]) {
q.options.type = "" + opts.type
}["bgColor", "textColor"].forEach(function (o) {
if (o in opts) {
q.options[o] = hexToRgb(opts[o])
}
});
["fontStyle", "fontFamily"].forEach(function (o) {
if (o in opts) {
q.options[o] = opts[o]
}
});
_queue.push(q);
if (_queue.length > 100) {
throw new Error("Too many badges requests in queue.")
}
icon.start()
} else {
icon.reset()
}
} catch (e) {
throw new Error("Error setting badge. Message: " + e.message)
}
};
if (_ready) {
_readyCb()
}
};
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()
}
};
var video = function (videoElement) {
_readyCb = function () {
try {
if (videoElement === "stop") {
_stop = true;
icon.reset();
_stop = false;
return
}
videoElement.addEventListener("play", function () {
drawVideo(this)
}, false)
} catch (e) {
throw new Error("Error setting video. Message: " + e.message)
}
};
if (_ready) {
_readyCb()
}
};
var webcam = function (action) {
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()
}
}
};
function drawVideo(video) {
if (video.paused || video.ended || _stop) {
return false
}
try {
_context.clearRect(0, 0, _w, _h);
_context.drawImage(video, 0, 0, _w, _h)
} catch (e) {}
_drawTimeout = setTimeout(function () {
drawVideo(video)
}, animation.duration);
link.setIcon(_canvas)
}
var link = {};
link.getIcon = function () {
var elm = false;
var getLink = function () {
var link = _doc.getElementsByTagName("head")[0].getElementsByTagName("link");
for (var l = link.length, i = l - 1; i >= 0; i--) {
if (/(^|\s)icon(\s|$)/i.test(link[i].getAttribute("rel"))) {
return link[i]
}
}
return false
};
if (_opt.element) {
elm = _opt.element
} else if (_opt.elementId) {
elm = _doc.getElementById(_opt.elementId);
elm.setAttribute("href", elm.getAttribute("src"))
} else {
elm = getLink();
if (elm === false) {
elm = _doc.createElement("link");
elm.setAttribute("rel", "icon");
_doc.getElementsByTagName("head")[0].appendChild(elm)
}
}
elm.setAttribute("type", "image/png");
return elm
};
link.setIcon = function (canvas) {
var url = canvas.toDataURL("image/png");
if (_opt.dataUrl) {
_opt.dataUrl(url)
}
if (_opt.element) {
_opt.element.setAttribute("href", url);
_opt.element.setAttribute("src", url)
} else if (_opt.elementId) {
var elm = _doc.getElementById(_opt.elementId);
elm.setAttribute("href", url);
elm.setAttribute("src", url)
} else {
if (_browser.ff || _browser.opera) {
var old = _orig;
_orig = _doc.createElement("link");
if (_browser.opera) {
_orig.setAttribute("rel", "icon")
}
_orig.setAttribute("rel", "icon");
_orig.setAttribute("type", "image/png");
_doc.getElementsByTagName("head")[0].appendChild(_orig);
_orig.setAttribute("href", url);
if (old.parentNode) {
old.parentNode.removeChild(old)
}
} else {
_orig.setAttribute("href", url)
}
}
};
function hexToRgb(hex) {
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function (m, r, g, b) {
return r + r + g + g + b + b
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : false
}
function merge(def, opt) {
var mergedOpt = {};
var attrname;
for (attrname in def) {
mergedOpt[attrname] = def[attrname]
}
for (attrname in opt) {
mergedOpt[attrname] = opt[attrname]
}
return mergedOpt
}
function isPageHidden() {
return _doc.hidden || _doc.msHidden || _doc.webkitHidden || _doc.mozHidden
}
var animation = {};
animation.duration = 40;
animation.types = {};
animation.types.fade = [{
x: .4,
y: .4,
w: .6,
h: .6,
o: 0
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .1
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .2
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .3
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .4
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .5
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .6
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .7
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .8
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: .9
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: 1
}];
animation.types.none = [{
x: .4,
y: .4,
w: .6,
h: .6,
o: 1
}];
animation.types.pop = [{
x: 1,
y: 1,
w: 0,
h: 0,
o: 1
}, {
x: .9,
y: .9,
w: .1,
h: .1,
o: 1
}, {
x: .8,
y: .8,
w: .2,
h: .2,
o: 1
}, {
x: .7,
y: .7,
w: .3,
h: .3,
o: 1
}, {
x: .6,
y: .6,
w: .4,
h: .4,
o: 1
}, {
x: .5,
y: .5,
w: .5,
h: .5,
o: 1
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: 1
}];
animation.types.popFade = [{
x: .75,
y: .75,
w: 0,
h: 0,
o: 0
}, {
x: .65,
y: .65,
w: .1,
h: .1,
o: .2
}, {
x: .6,
y: .6,
w: .2,
h: .2,
o: .4
}, {
x: .55,
y: .55,
w: .3,
h: .3,
o: .6
}, {
x: .5,
y: .5,
w: .4,
h: .4,
o: .8
}, {
x: .45,
y: .45,
w: .5,
h: .5,
o: .9
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: 1
}];
animation.types.slide = [{
x: .4,
y: 1,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .9,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .9,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .8,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .7,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .6,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .5,
w: .6,
h: .6,
o: 1
}, {
x: .4,
y: .4,
w: .6,
h: .6,
o: 1
}];
animation.run = function (opt, cb, revert, step) {
var animationType = animation.types[isPageHidden() ? "none" : _opt.animation];
if (revert === true) {
step = typeof step !== "undefined" ? step : animationType.length - 1
} else {
step = typeof step !== "undefined" ? step : 0
}
cb = cb ? cb : function () {};
if (step < animationType.length && step >= 0) {
type[_opt.type](merge(opt, animationType[step]));
_animTimeout = setTimeout(function () {
if (revert) {
step = step - 1
} else {
step = step + 1
}
animation.run(opt, cb, revert, step)
}, animation.duration);
link.setIcon(_canvas)
} else {
cb();
return
}
};
init();
return {
badge: badge,
video: video,
image: image,
webcam: webcam,
reset: icon.reset,
browser: {
supported: _browser.supported
}
}
};
if (typeof define !== "undefined" && define.amd) {
define([], function () {
return Favico
})
} else if (typeof module !== "undefined" && module.exports) {
module.exports = Favico
} else {
this.Favico = Favico
}
})();
favico.js cdn
http://www.bootcdn.cn/favico.js/
favioc.js 使用
http://www.jq22.com/yanshi3233
favico是针对网页图标内容更改的更多相关文章
- 为你的网页图标（Favicon）添加炫丽的动画和图片
Favico.js 在让你的网页图标显示徽章,图像或视频.你设置可以轻松地在网页图标中使用动画,可以自定义类型的动画,背景颜色和文字颜色.它支持的动画,像幻灯片,渐变,弹出等等. 您可能感兴趣的相关文 ...
- C#抓取网页HTML内容
网上很多内容采集工具,今天就自己试着写一个,发现C#可以轻松的抓去网页的内容,进而通过正则来分离出自己感兴趣的数据.下面是抓去网页内容的代码: using System; using System.C ...
- 使用Teleport Pro离线下载网页所有内容
在学习生活中,碰到网页中内容太多,如何讲其保存到本地,已方便随时查看呢? 使用Teleport Pro就可以解决问题: 首先下载Teleport Pro V1.54 汉化绿色版的,解压完之后 ...
- c# 正则表达式对网页进行内容抓取
原文 c# 正则表达式对网页进行内容抓取 搜索引擎中一个比较重要的环节就是从网页中抽取出有效内容.简单来说,就是吧HTML文本中的HTML标记去掉,留下我们用IE等浏览器打开HTML文档看到的部分(我 ...
- 获取WebView里的网页文本内容
获取WebView里的网页文本内容,能够採用例如以下方法: public class ComJSInterface { public void loadHtmlContent(String conte ...
- Windows 和 Linux下使用socket下载网页页面内容（可设置接收/发送超时）的代码
主要难点在于设置recv()与send()的超时时间,具体要注意的事项,请看代码注释部分,下面是代码: #include <stdio.h> #include <sys/types. ...
- JS 阻止整个网页的内容被选中
pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...
- 用TcpClient如何获取远程网页的内容
用TcpClient如何获取远程网页的内容 private string GetHTMLTCP(string URL) { string strHTML = "";//用来保存获得 ...
- 定义一个方法get_page(url),url参数是需要获取网页内容的网址，返回网页的内容。提示（可以了解python的urllib模块）
定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...
随机推荐
- python算法-排列组合
排列组合 一.递归 1.自己调用自己 2.找到一个退出的条件 二.全排列:针对给定的一组数据,给出包含所有数据的排列的组合 1:1 1,2:[[1,2],[2,1]] 1,2,3:[[1,2,3],[ ...
- html 标签附加文本属性
<!DOCTYPE html> <html> <head> <script> function showDetails(animal) { var an ...
- [uiautomator篇][exist 存在,但click错误]
uiautomator定位页面元素是,定位存在的;但是click的时候,发现点的位置不对,(不知道是android系统的问题还是uiautomator的问题,初步怀疑是系统的问题)
- 用requests自动访问网页，下载网页内容
import requests # 请求下载excel def downloading(text_path): # 访问要下载的链接文件 with open(text_path) as f: for ...
- 理解 PHP output buffer
在需要使用输出缓存区的时候,一般会在代码中加上ob_start()这个函数. 这是因为php.ini中output_buffering设置为off时,则缓存区处于关闭状态,需要用ob_start()打 ...
- IDE介绍以及Eclipse的简单使用
一.IDE介绍 ① 什么是IDE? 1. IDE全称是”Integrated Development Environment”,中文称为“集成开发环境”; 2.是用于提供程序开发环境的应用程序, ...
- 【java基础 14】锁的粒度：ThreadLocal、volatile、Atomic和Synchronized
导读:题目中提到的几个关键字,分别是解决并发问题中,加锁所使用到的几个关键字,每个关键字代表的锁的粒度 不同,本篇博客,主要是从概念定义上,区分这几个关键字的应用场景.(PS:睡梦中,依稀记得有回面试 ...
- linux下安装firefox
首先检查系统有没有安装:rpm -qa|grep firefox 如果有安装,先删掉rpm -e * firefox不同版本下载:http://liulanmi.com/firefox 具体方法如下: ...
- 从实际案例聊聊Java应用的GC优化
转自美团点评技术博客:https://tech.meituan.com/jvm_optimize.html 当Java程序性能达不到既定目标,且其他优化手段都已经穷尽时,通常需要调整垃圾回收器来进一步 ...
- 如果dom节点是动态添加进页面的，在页面节点绑定事件如何解决的问题。
如果dom节点是动态添加进页面,想在节点绑定事件,传统的做法就是遍历节点,但会出现问题,也肯能有其他的办法,突然想到 可以依据事件冒泡,这样就不惧页面后添加节点而不响应事件的问题.比较结实.示例代码如 ...