|
|
@@ -1,74 +1,100 @@ |
|
|
|
/** |
|
|
|
* LetterAvatar |
|
|
|
* |
|
|
|
* |
|
|
|
* Artur Heinze |
|
|
|
* Create Letter avatar based on Initials |
|
|
|
* based on https://gist.github.com/leecrossley/6027780 |
|
|
|
*/ |
|
|
|
(function(w, d){ |
|
|
|
function LetterAvatar (name, size, color) { |
|
|
|
name = name || ''; |
|
|
|
size = size || 60; |
|
|
|
var colours = [ |
|
|
|
"#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", |
|
|
|
"#f1c40f", "#e67e22", "#e74c3c", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d" |
|
|
|
], |
|
|
|
nameSplit = String(name).split(' '), |
|
|
|
initials, charIndex, colourIndex, canvas, context, dataURI; |
|
|
|
if (nameSplit.length == 1) { |
|
|
|
initials = nameSplit[0] ? nameSplit[0].charAt(0):'?'; |
|
|
|
} else { |
|
|
|
initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0); |
|
|
|
} |
|
|
|
if (w.devicePixelRatio) { |
|
|
|
size = (size * w.devicePixelRatio); |
|
|
|
} |
|
|
|
|
|
|
|
charIndex = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64; |
|
|
|
colourIndex = charIndex % 20; |
|
|
|
canvas = d.createElement('canvas'); |
|
|
|
canvas.width = size; |
|
|
|
canvas.height = size; |
|
|
|
context = canvas.getContext("2d"); |
|
|
|
|
|
|
|
context.fillStyle = color ? color : colours[colourIndex - 1]; |
|
|
|
context.fillRect (0, 0, canvas.width, canvas.height); |
|
|
|
context.font = Math.round(canvas.width/2)+"px 'Microsoft Yahei'"; |
|
|
|
context.textAlign = "center"; |
|
|
|
context.fillStyle = "#FFF"; |
|
|
|
context.fillText(initials, size / 2, size / 1.5); |
|
|
|
dataURI = canvas.toDataURL(); |
|
|
|
canvas = null; |
|
|
|
return dataURI; |
|
|
|
(function (w, d) { |
|
|
|
function LetterAvatar(name, size, color) { |
|
|
|
name = name || ""; |
|
|
|
size = size || 60; |
|
|
|
var colours = [ |
|
|
|
"#1abc9c", |
|
|
|
"#2ecc71", |
|
|
|
"#3498db", |
|
|
|
"#9b59b6", |
|
|
|
"#34495e", |
|
|
|
"#16a085", |
|
|
|
"#27ae60", |
|
|
|
"#2980b9", |
|
|
|
"#8e44ad", |
|
|
|
"#2c3e50", |
|
|
|
"#f1c40f", |
|
|
|
"#e67e22", |
|
|
|
"#e74c3c", |
|
|
|
"#00bcd4", |
|
|
|
"#95a5a6", |
|
|
|
"#f39c12", |
|
|
|
"#d35400", |
|
|
|
"#c0392b", |
|
|
|
"#bdc3c7", |
|
|
|
"#7f8c8d", |
|
|
|
], |
|
|
|
nameSplit = String(name).split(" "), |
|
|
|
initials, |
|
|
|
charIndex, |
|
|
|
colourIndex, |
|
|
|
canvas, |
|
|
|
context, |
|
|
|
dataURI; |
|
|
|
if (nameSplit.length == 1) { |
|
|
|
initials = nameSplit[0] ? nameSplit[0].charAt(0) : "?"; |
|
|
|
} else { |
|
|
|
initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0); |
|
|
|
} |
|
|
|
let initials1 = initials.toUpperCase(); |
|
|
|
if (w.devicePixelRatio) { |
|
|
|
size = size * w.devicePixelRatio; |
|
|
|
} |
|
|
|
LetterAvatar.transform = function() { |
|
|
|
Array.prototype.forEach.call(d.querySelectorAll('img[avatar]'), function(img, name, color) { |
|
|
|
name = img.getAttribute('avatar'); |
|
|
|
color = img.getAttribute('color'); |
|
|
|
img.src = LetterAvatar(name, img.getAttribute('width'), color); |
|
|
|
img.removeAttribute('avatar'); |
|
|
|
img.setAttribute('alt', name); |
|
|
|
}); |
|
|
|
}; |
|
|
|
// AMD support |
|
|
|
if (typeof define === 'function' && define.amd) { |
|
|
|
|
|
|
|
define(function () { return LetterAvatar; }); |
|
|
|
|
|
|
|
|
|
|
|
charIndex = (initials == "?" ? 72 : initials.charCodeAt(0)) - 64; |
|
|
|
colourIndex = charIndex % 20; |
|
|
|
canvas = d.createElement("canvas"); |
|
|
|
canvas.width = size; |
|
|
|
canvas.height = size; |
|
|
|
context = canvas.getContext("2d"); |
|
|
|
|
|
|
|
context.fillStyle = color ? color : colours[colourIndex - 1]; |
|
|
|
context.fillRect(0, 0, canvas.width, canvas.height); |
|
|
|
context.font = Math.round(canvas.width / 2) + "px 'Microsoft Yahei'"; |
|
|
|
context.textAlign = "center"; |
|
|
|
context.fillStyle = "#FFF"; |
|
|
|
context.fillText(initials1, size / 2, size / 1.5); |
|
|
|
dataURI = canvas.toDataURL(); |
|
|
|
canvas = null; |
|
|
|
return dataURI; |
|
|
|
} |
|
|
|
LetterAvatar.transform = function () { |
|
|
|
Array.prototype.forEach.call( |
|
|
|
d.querySelectorAll("img[avatar]"), |
|
|
|
function (img, name, color) { |
|
|
|
name = img.getAttribute("avatar"); |
|
|
|
color = img.getAttribute("color"); |
|
|
|
img.src = LetterAvatar(name, img.getAttribute("width"), color); |
|
|
|
img.removeAttribute("avatar"); |
|
|
|
img.setAttribute("alt", name); |
|
|
|
} |
|
|
|
); |
|
|
|
}; |
|
|
|
// AMD support |
|
|
|
if (typeof define === "function" && define.amd) { |
|
|
|
define(function () { |
|
|
|
return LetterAvatar; |
|
|
|
}); |
|
|
|
|
|
|
|
// CommonJS and Node.js module support. |
|
|
|
} else if (typeof exports !== 'undefined') { |
|
|
|
|
|
|
|
// Support Node.js specific `module.exports` (which can be a function) |
|
|
|
if (typeof module != 'undefined' && module.exports) { |
|
|
|
exports = module.exports = LetterAvatar; |
|
|
|
} |
|
|
|
// But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) |
|
|
|
exports.LetterAvatar = LetterAvatar; |
|
|
|
} else { |
|
|
|
|
|
|
|
window.LetterAvatar = LetterAvatar; |
|
|
|
d.addEventListener('DOMContentLoaded', function(event) { |
|
|
|
LetterAvatar.transform(); |
|
|
|
}); |
|
|
|
} else if (typeof exports !== "undefined") { |
|
|
|
// Support Node.js specific `module.exports` (which can be a function) |
|
|
|
if (typeof module != "undefined" && module.exports) { |
|
|
|
exports = module.exports = LetterAvatar; |
|
|
|
} |
|
|
|
})(window, document); |
|
|
|
// But always support CommonJS module 1.1.1 spec (`exports` cannot be a function) |
|
|
|
exports.LetterAvatar = LetterAvatar; |
|
|
|
} else { |
|
|
|
window.LetterAvatar = LetterAvatar; |
|
|
|
d.addEventListener("DOMContentLoaded", function (event) { |
|
|
|
LetterAvatar.transform(); |
|
|
|
}); |
|
|
|
} |
|
|
|
})(window, document); |