如何将图像从 HTML 表单转换为网站图标？

问题描述

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

如果使用 JavaScript 本身无法将图像转换为收藏夹图标，是否可以上传“.ico”文件，并将其设为当前页面的收藏夹图标？

解决方法

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

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

请注意，此演示将运行，但您不会看到结果，因为图标设置在框架内加载的文档上，而不是在它运行的 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。

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