Created
March 19, 2019 02:59
-
-
Save evil0th/936c53add8c85fdef202230c9da8e719 to your computer and use it in GitHub Desktop.
Letter Avatars Generate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Letter Avatars</title> | |
</head> | |
<style type="text/css"> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
} | |
pre { | |
margin: 20px 0; | |
padding: 20px; | |
background: #fafafa; | |
} | |
.round { | |
border-radius: 50%; | |
} | |
</style> | |
<body> | |
<h1>Letter Avatars</h1> | |
<small><strong>Usage:</strong></small> | |
<pre> | |
<code><img width="60" height="60" avatar="Andy Dandy"></code> | |
</pre> | |
<div> | |
<img width="60" height="60" avatar="Andy Dandy"> | |
<img class="round" width="60" height="60" avatar="Andy Dandy"> | |
<img width="30" height="30" avatar="Andy"> | |
<img class="round" width="30" height="30" avatar="Andy"> | |
</div> | |
<div><img width="60" height="60" avatar="Bernhard Golf"></div> | |
<div><img width="60" height="60" avatar="Carsten Muller"></div> | |
<div><img width="60" height="60" avatar="Donald Trump"></div> | |
<div><img width="60" height="60" avatar="Eva Kunis"></div> | |
<div><img width="60" height="60" avatar="Fritz John"></div> | |
<div><img width="60" height="60" avatar="George"></div> | |
<div><img width="60" height="60" avatar="Howard"></div> | |
<div><img width="60" height="60" avatar="Ingrid"></div> | |
<div><img width="60" height="60" avatar="John"></div> | |
<div><img width="60" height="60" avatar="Kira"></div> | |
<div><img width="60" height="60" avatar="Laura"></div> | |
<div><img width="60" height="60" avatar="Michael"></div> | |
<div><img width="60" height="60" avatar="Nora"></div> | |
<div><img width="60" height="60" avatar="Oscar"></div> | |
<div><img width="60" height="60" avatar="Peter"></div> | |
<div><img width="60" height="60" avatar="Quentin"></div> | |
<div><img width="60" height="60" avatar="Richard"></div> | |
<div><img width="60" height="60" avatar="Seinfeld"></div> | |
<div><img width="60" height="60" avatar="Tina"></div> | |
<div><img width="60" height="60" avatar="Ulf"></div> | |
<div><img width="60" height="60" avatar="Viktor"></div> | |
<div><img width="60" height="60" avatar="Wilfred"></div> | |
<div><img width="60" height="60" avatar="Xavier"></div> | |
<div><img width="60" height="60" avatar="Yanne"></div> | |
<div><img width="60" height="60" avatar="Zonk"></div> | |
<div><img width="60" height="60" avatar=""></div> | |
<script type="text/javascript"> | |
/* | |
* LetterAvatar | |
* | |
* Artur Heinze | |
* Create Letter avatar based on Initials | |
* based on https://gist.github.com/leecrossley/6027780 | |
*/ | |
(function (w, d) { | |
function LetterAvatar(name, size) { | |
name = name || ''; | |
size = size || 60; | |
var colours = [ | |
"#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", | |
"#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d" | |
], | |
nameSplit = String(name).toUpperCase().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 = colours[colourIndex - 1]; | |
context.fillRect(0, 0, canvas.width, canvas.height); | |
context.font = Math.round(canvas.width / 2) + "px Arial"; | |
context.textAlign = "center"; | |
context.fillStyle = "#FFF"; | |
context.fillText(initials, 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) { | |
name = img.getAttribute('avatar'); | |
img.src = LetterAvatar(name, img.getAttribute('width')); | |
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(); | |
}); | |
} | |
})(window, document); | |
</script> | |
</body> | |
</html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment