如何将图像（从 HTML 形式）转换为网站图标？

Question

我正在尝试构建一个将使用 HTML 表单上传图像文件的网页。上传后，我的目标是将此图片转换为网站图标，并使其成为当前页面的网站图标。有没有办法使用 vanilla JavaScript 来实现这一点？

如果单独使用 JavaScript 无法将图像转换为网站图标，是否可以上传一个“.ico”文件，并使其成为当前页面的网站图标？

Answer 1

Vanilla JavaScript 是一个术语，用来表示“JavaScript + Web 浏览器提供的 API”，因此它无法完成上传部分。

您可以使用 FileReader 读取文件，然后将生成的 data: 方案 URL 指定为网站图标。

请注意，此演示将运行，但您不会看到结果，因为图标是在框架内加载的文档上设置的，而不是在 SO 页面上运行s in.

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.

然后您需要代码将其存储在服务器上，并在下次有人请求时将其添加到网页中。具体细节实际上取决于您现有的服务器端环境。

如何将图像（从 HTML 形式）转换为网站图标？

How can I convert an image (from an HTML form) to a favicon?

javascript

html

image

file-upload

favicon