javascript - 如何将图像(从 HTML 表单)转换为网站图标?
问题描述
我正在尝试构建一个网页,该网页将使用 HTML 表单上传图像文件。上传后,我的目标是将此图像转换为网站图标,并使其成为当前页面的网站图标。有没有办法使用 vanilla JavaScript 来实现这一点?
如果仅使用 JavaScript 无法将图像转换为网站图标,是否可以上传“.ico”文件,并将其设为当前页面的网站图标?
解决方案
Vanilla JavaScript 是一个术语,用于表示“Web 浏览器提供的 JavaScript + API”,因此它不能做上传部分。
您可以使用 FileReader 读取文件,然后将生成的data:
方案 URL 分配为 favicon。
请注意,此演示将运行,但您不会看到结果,因为 favicon 是在框架内加载的文档上设置的,而不是在它运行的 SO 页面上设置的。
document.querySelector('input').addEventListener('change', e => {
const { files } = e.target;
const reader = new FileReader();
reader.addEventListener('load', e => {
const url = reader.result;
console.log(url); // For the sake of this demo
document.querySelector('link[rel=icon]').href = url;
});
// This would benefit from error handling in case a file wasn't selected or it wasn't an image
reader.readAsDataURL(files[0]);
});
<link rel="icon">
<input type=file>
显然,这不会持续存在,除非您采取措施使其持续存在(例如将其存储在本地存储中,然后在再次加载页面时检查图像是否存储在那里。
如果要上传它,则需要将数据发送到服务器。最简单的方法是只提交常规表单,但您也可以使用 Ajax。
然后,您需要代码将其存储在服务器上,并在下次有人请求时将其添加到网页中。其细节实际上取决于您现有的服务器端环境。
推荐阅读
- bash - 如何将输入读取为数组并将其用作 shell 脚本中的变量?
- python - JSON到类实例?
- python - 将文本附加到 ObjectProperty
- java - 在用例中处理来自网关实现的错误 - 清洁架构
- python - 在 python 的计算机逻辑中,分布规律是否有效?
- flutter - 是否有理由不升级 Flutter SDK 最小约束?
- swift - 在 NSBatchDeleteRequest 之后使用动画更新 tableview
- python-3.x - np.mean() 给出错误的平均值?
- bash - 来自 7 GB 文本文件或许多较小文件的 grep
- java - Selenium 服务器并行测试错误:无效的会话 ID