时间戳

首页 > 解决方案 > 如何在javascript客户端将图像解析为ICO格式

javascript - 如何在javascript客户端将图像解析为ICO格式

问题描述

我想在前端使用 javascript 将图像 (png/jpeg) 转换为 ICO。

在网上搜索时，我在 github 上看到了这段代码：https ://gist.github.com/twolfson/7656254但不幸的是它使用fs了 nodejs 模块（+ 代码很难理解）。

有人可以告诉我应该搜索什么/或通过在前端使用 javascript 将 png/jpeg 转换为 ico 的方法吗？

我尝试过的替代方案？

使用了这个 repo：https ://github.com/fiahfy/ico-convert但他们使用sharp和sharp在客户端不支持

标签： javascript

解决方案

在谷歌上，我得到了这个 Mozilla 帖子，带有示例，它提供了以下转换为 ICO 格式的代码（仅限于 Firefox 浏览器），

一种将画布转换为 ico 的方法（仅限 Mozilla）

这用于-moz-parse将画布转换为 ico。Windows XP 不支持从 PNG 转换为 ico，因此它使用 bmp 代替。通过设置下载属性创建下载链接。下载属性的值是将用作文件名的名称。

编码：

var canvas = document.getElementById('canvas');
var d = canvas.width;
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(d / 2, 0);
ctx.lineTo(d, d);
ctx.lineTo(0, d);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

function blobCallback(iconName) {
  return function(b) {
    var a = document.createElement('a');
    a.textContent = 'Download';
    document.body.appendChild(a);
    a.style.display = 'block';
    a.download = iconName + '.ico';
    a.href = window.URL.createObjectURL(b);
  }
}
canvas.toBlob(blobCallback('passThisString'),
  'image/vnd.microsoft.icon', 
  '-moz-parse-options:format=bmp;bpp=32'
);

除此之外，我发现没有其他方法可以将 png/jpeg 转换为 ICO 格式。或者，您可以使用以下任何模块在服务器端进行转换：

推荐阅读