WordPress之用字母替代图片脚本：LetterAvatar
下面由WordPress技巧栏目给大家介绍关于用字母替代图片脚本：LetterAvatar，希望对需要的朋友有所帮助！
基于canvas，通过toDataURL动态生成base64图片。目前我主题的Gravatar头像，就是利用这个LetterAvatar脚本实现未设置Gravatar头像则读取ALT标签，自动生成首字图片替代默认的头像图片。
之前已有WP爱好者制作了一款：mk-letter-avatar 字母头像插件，试了一下很好用，不过打开浏览器开者工具发现产生大量404错误，看了一下源代码，该插件是通过无头像返回404错误，触发onerror事件用自动生成的字母图片替换src图片地址，判断方式不是很合理，如果不是因为个缺点我都想直接拿来用了，如果作者再优化一下，绝对是款优秀实用的插件。
我的实现原理和插件不同，配合头像本地缓存功能，判断无头像后，直接为无头像的图片添加特定的class类，然后通过LetterAvatar脚本替换图片。
需要注意的是上面提到的插件，Gravatar头像图片必须有alt标签属性，否则不会生成正常的图片，可惜大部分主题默认Gravatar头像alt标签属性是空的.....
如果想自动为Gravatar头像添加alt标签属性，可以将下面的代码添加到当前主题函数模板functions.php中：
1 2 3 4 5 6 7 8 9 10 11 |
|
之后，自动将评论者昵称做为alt属性。
本文只是自己做个记录，并不是教大家怎么弄这个头像，如果认为这字母头像还不错，请直接使用上面介绍的插件。
另附LetterAvatar脚本演示代码：
1 2 3 4 5 6 7 |
|
<script>
/*
* 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", "#ecf0f1", "#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 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[alt]'), function(img, name, color) {
name = img.getAttribute('alt');
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();
});
}
})(window, document);
</script>
原项目地址：https://github.com/daolavi/LetterAvatar
推荐教程：《WordPress》
以上是WordPress之用字母替代图片脚本：LetterAvatar的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PHP 与 Flutter 的比较：移动端开发的最佳选择
May 06, 2024 pm 10:45 PM
PHP和Flutter是移动端开发的流行技术。Flutter胜在跨平台能力、性能和用户界面，适合需要高性能、跨平台和自定义UI的应用程序。PHP则适用于性能较低、不跨平台的服务器端应用程序。
wordpress如何修改页面宽度
Apr 16, 2024 am 01:03 AM
通过编辑 style.css 文件，您可以轻松修改 WordPress 页面宽度：编辑 style.css 文件，添加 .site-content { max-width: [您的首选宽度]; }。修改 [您的首选宽度] 以设置页面宽度。保存更改并清除缓存（可选）。
wordpress如何做产品页
Apr 16, 2024 am 12:39 AM
在 WordPress 中创建产品页面：1. 创建产品（名称、描述、图片）；2. 自定义页面模板（添加标题、描述、图片、按钮）；3. 输入产品信息（库存、尺寸、重量）；4. 创建变体（不同颜色、尺寸）；5. 设置可见性（公开或隐藏）；6. 启用/禁用评论；7. 预览并发布页面。
wordpress文章在哪个文件夹
Apr 16, 2024 am 10:29 AM
WordPress 文章存储在 /wp-content/uploads 文件夹中。该文件夹使用子文件夹对不同类型的上传进行分类，包括按年、月和文章 ID 组织的文章。文章文件以纯文本格式 (.txt) 存储，文件名通常包含其 ID 和标题。
wordpress模板文件在哪
Apr 16, 2024 am 11:00 AM
WordPress 模板文件位于 /wp-content/themes/[主题名称]/ 目录。它们用于决定网站的外观和功能，包括页眉（header.php）、页脚（footer.php）、主模板（index.php）、单个文章（single.php）、页面（page.php）、存档（archive.php）、类别（category.php）、标签（tag.php）、搜索（search.php）和 404 错误页面（404.php）。通过编辑和修改这些文件，可以自定义 WordPress 网站的外
wordpress如何搜索作者
Apr 16, 2024 am 01:18 AM
在 WordPress 中搜索作者：1. 登录管理面板后，导航到“文章”或“页面”，使用搜索栏输入作者姓名，在“过滤器”中选择“作者”。2. 其他技巧：使用通配符扩大搜索范围，使用运算符组合条件，或输入作者 ID 以搜索文章。
wordpress哪个版本稳定
Apr 16, 2024 am 10:54 AM
最稳定的 WordPress 版本是最新版本，因为它包含最新的安全补丁、增强性能并引入新特性和改进。为了更新到最新版本，请登录 WordPress 仪表盘，转到“更新”页面并单击“立即更新”。
wordpress需要备案吗
Apr 16, 2024 pm 12:07 PM
WordPress需要备案。根据我国《互联网安全管理办法》，在境内提供互联网信息服务的网站需向所在地省级互联网信息办公室备案，包括WordPress在内。备案流程包括选择服务商、准备信息、提交申请、审核公示、获取备案号等步骤。备案好处有合法合规、提升可信度、满足接入要求、确保正常访问等。备案信息需真实有效，备案后需定期更新。
