how to parse image to ICO format in javascript client side

Question

I want to convert image (png/jpeg) to ICO using javascript in frontend.

On searching the web, I came across this code on github: https://gist.github.com/twolfson/7656254 but unfortunately it uses fs module of nodejs (+ the code is very difficult to compehend).

Can someone tell guide me on what should I search/or a way through which I can convert png/jpeg to ico using javascript in frontend?

Alternates I have tried?

Used this repo: https://github.com/fiahfy/ico-convert but they use sharp and sharp isn't supported on client side

Answer 1

On googling, I got this Mozilla post, with examples, which provides the following code for conversion to ICO format (limited to Firefox browser only),

A way to convert a canvas to an ico (Mozilla only)

This uses -moz-parse to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.

The code:

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'
);

Apart from that, I'd found no other ways to convert png/jpeg into ICO format. Alternatively, you can do the conversion on the server-side by using any of the following modules:

• to-ico
• image-to-icon
• png-to-ico

Answer 2

Should you want to support every browser and have only a PNG image, the .ICO file format supports embedded PNG images as long as they are smaller than 256x256. Based on the ICO file format, I've been able to construct an ICO using a small PNG image and a hex editor. This can be replicated in JavaScript. This is my testing image file:

To convert it into an ICO, I prepended the following hex data, little-endian encoded (the bytes in the values are reversed):

00 00 01 00 - File header. Says "This file is an ICO."
01 00 - There is one image in this file.
9C - This image is 0x9C pixels wide. **This should be variable**
77 - This image is 0x77 pixels tall. **This should be variable**
00 - There is not a limited color pallette.
00 - Reserved value.
01 00 - There is one color plane in this image.
18 00 - There are 0x18 bits per pixel (24 bits per pixel is standard RGB encoding)
8A 06 00 00 - This image is 0x0000068A large. **This should be variable**
16 00 00 00 - There were 0x16 bytes before this point.
[PNG data here]

This successfully created an ISO file from the PNG. You can create a simple JavaScript script for this prepending. Looking at the PNG specification, the first 8 bytes are a header, followed by 8 bytes of IHDR chunk metadata, which starts with a 4-byte little-endian width and a 4-byte little-endian height. This can be used in our script to discover the PNG's width and height. Something like:

function pngToIco(icoFile, pngData) {

    icoFile = "\x00\x00\x01\x00\x01\x00"; // First 6 bytes are constant
    icoFile += pngData[15+4]; // PNG width byte
    icoFile += pngData[15+8]; // PNG height byte
    // Make sure PNG is less than 256x256
    if (pngData[15+1] || pngData[15+2] || pngData[15+3]) {
        console.log("Width over 255!"); return;
    }
    if (pngData[15+5] || pngData[15+6] || pngData[15+7]) {
        console.log("Height over 255!"); return;
    }
    // Add more (probably constant) information
    icoFile += "\x00\x00\x01\x00\x18\x00";
    // Add encoded length
    var lenBytes = pngData.length;
    for (var i=0; i<4; i++) {
        icoFile += String.fromCharCode(lenBytes % 256);
        lenBytes >>= 4;
    }
    // We had 0x16 bytes before now
    icoFile += "\x16\x00\x00\x00";
    // Now add the png data
    icoFile += pngData;
    // Now we have a valid ico file!
    return icoFile;

}

Answer 3

Here's another solution if you're willing to bend the rules of this question being a JavaScript question. If your web browser supports WebAssembly (most modern browsers do), you could use a version of the well-known library ImageMagick cross-compiled into WebAssembly. Here is what I found: https://github.com/KnicKnic/WASM-ImageMagick

This library takes in image data from a sourceBytes buffer, and returns a transformed or converted image. According to the documentation, you can use it with a syntax similar to ImageMagick's terminal syntax, with a bit of extra code (copied from documentation and modified):

<script type='module'>
import * as Magick from 'https://knicknic.github.io/wasm-imagemagick/magickApi.js';

async function converPNGToIco(pngData) {
    var icoData = await Magick.Call([{ 'name': 'srcFile.png', 'content': pngData }], ["convert", "srcFile.png", "-resize", "200x200", "outFile.ico"]);
    // do stuff with icoData
}
</script>

Answer 4

Here is a pure JavaScript version (inspired by @id01) that converts an array of png image data (each images as an array of bytes) and returns an array of bytes for .ico file

function pngToIco( images )
{
  let icoHead = [ //.ico header
        0, 0, // Reserved. Must always be 0 (2 bytes)
        1, 0, // Specifies image type: 1 for icon (.ICO) image, 2 for cursor (.CUR) image. Other values are invalid. (2 bytes)
        images.length & 255, (images.length >> 8) & 255 // Specifies number of images in the file. (2 bytes)
      ],
      icoBody = [],
      pngBody = [];

  for(let i = 0, num, pngHead, pngData, offset = 0; i < images.length; i++)
  {
    pngData = Array.from( images[i] );
    pngHead = [ //image directory (16 bytes)
      0,    // Width 0-255, should be 0 if 256 pixels (1 byte)
      0,    // Height 0-255, should be 0 if 256 pixels (1 byte)
      0,    // Color count, should be 0 if more than 256 colors (1 byte)
      0,    // Reserved, should be 0 (1 byte)
      1, 0, // Color planes when in .ICO format, should be 0 or 1, or the X hotspot when in .CUR format (2 bytes)
      32, 0 // Bits per pixel when in .ICO format, or the Y hotspot when in .CUR format (2 bytes)
    ];
    num = pngData.length;
    for (let i = 0; i < 4; i++)
      pngHead[pngHead.length] = ( num >> ( 8 * i )) & 255; // Size of the bitmap data in bytes (4 bytes)

    num = icoHead.length + (( pngHead.length + 4 ) * images.length ) + offset;
    for (let i = 0; i < 4; i++)
      pngHead[pngHead.length] = ( num >> ( 8 * i )) & 255; // Offset in the file (4 bytes)

    offset += pngData.length;
    icoBody = icoBody.concat(pngHead); // combine image directory
    pngBody = pngBody.concat(pngData); // combine actual image data
  }
  return icoHead.concat(icoBody, pngBody);
}

Example how to use by converting multiple canvas images into .ico:

function draw(canvas)
{
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  var p = Math.min(canvas.width, canvas.height);
  ctx.fillStyle = "yellow";
  ctx.lineWidth = p / 16 / 1.5;
  ctx.lineCap = "round";
  ctx.arc(50*p/100, 50*p/100, 39*p/100, 0, Math.PI * 2, true); // Outer circle
  ctx.save();
  var radgrad = ctx.createRadialGradient(50*p/100,50*p/100,0,50*p/100,50*p/100,50*p/100);
  radgrad.addColorStop(0, 'rgba(128,128,128,1)');
  radgrad.addColorStop(0.3, 'rgba(128,128,128,.8)');
  radgrad.addColorStop(0.5, 'rgba(128,128,128,.5)');
  radgrad.addColorStop(0.8, 'rgba(128,128,128,.2)');
  radgrad.addColorStop(1, 'rgba(128,128,128,0)');
  ctx.fillStyle = radgrad;
  ctx.fillRect(0, 0, p, p);
  ctx.restore();
  ctx.fill();
  ctx.moveTo(77*p/100, 50*p/100);
  ctx.arc(50*p/100, 50*p/100, 27*p/100, 0, Math.PI, false);  // Mouth (clockwise)
  ctx.moveTo(41*p/100, 42*p/100);
  ctx.arc(38*p/100, 42*p/100, 3*p/100, 0, Math.PI * 2, true);  // Left eye
  ctx.moveTo(65*p/100, 42*p/100);
  ctx.arc(62*p/100, 42*p/100, 3*p/100, 0, Math.PI * 2, true);  // Right eye
  ctx.stroke();
}

let images = [];//array of image data. each image as an array of bytes
for(let i= 0, a = [16,24,32,48,64,128,256,512,1024]; i < a.length; i++)
{
  let canvas = document.createElement("canvas");
  canvas.width = a[i];
  canvas.height = a[i];
  draw(canvas);

// Convert canvas to Blob, then Blob to ArrayBuffer.
  canvas.toBlob(function (blob) {
    const reader = new FileReader();
    reader.addEventListener('loadend', () => {
      images[i] = new Uint8Array(reader.result);
      if (images.length == a.length)//all canvases converted to png
      {
        let icoData = pngToIco(images), //array of bytes 
            type = "image/x-ico",
            blob = new Blob([new Uint8Array(icoData)], {type: type}),
            a = document.getElementById("download");

        a.download = "smile.ico";
        a.href = window.URL.createObjectURL(blob);
        a.dataset.downloadurl = [type, a.download, a.href].join(':');
        document.getElementById("img").src = a.href;
      }
    });
    reader.readAsArrayBuffer(blob);
  }, "image/png");
  document.body.appendChild(canvas);
}

function pngToIco( images )
{
  let icoHead = [ //.ico header
        0, 0, // Reserved. Must always be 0 (2 bytes)
        1, 0, // Specifies image type: 1 for icon (.ICO) image, 2 for cursor (.CUR) image. Other values are invalid. (2 bytes)
        images.length & 255, (images.length >> 8) & 255 // Specifies number of images in the file. (2 bytes)
      ],
      icoBody = [],
      pngBody = [];

  for(let i = 0, num, pngHead, pngData, offset = 0; i < images.length; i++)
  {
    pngData = Array.from( images[i] );
    pngHead = [ //image directory (16 bytes)
      0,    // Width 0-255, should be 0 if 256 pixels (1 byte)
      0,    // Height 0-255, should be 0 if 256 pixels (1 byte)
      0,    // Color count, should be 0 if more than 256 colors (1 byte)
      0,    // Reserved, should be 0 (1 byte)
      1, 0, // Color planes when in .ICO format, should be 0 or 1, or the X hotspot when in .CUR format (2 bytes)
      32, 0 // Bits per pixel when in .ICO format, or the Y hotspot when in .CUR format (2 bytes)
    ];
    num = pngData.length;
    for (let i = 0; i < 4; i++)
      pngHead[pngHead.length] = ( num >> ( 8 * i )) & 255; // Size of the bitmap data in bytes (4 bytes)

    num = icoHead.length + (( pngHead.length + 4 ) * images.length ) + offset;
    for (let i = 0; i < 4; i++)
      pngHead[pngHead.length] = ( num >> ( 8 * i )) & 255; // Offset in the file (4 bytes)

    offset += pngData.length;
    icoBody = icoBody.concat(pngHead); // combine image directory
    pngBody = pngBody.concat(pngData); // combine actual image data
  }
  return icoHead.concat(icoBody, pngBody);
}

<a id="download">download image <img id="img" width="128"></a>
<br>

https://jsfiddle.net/vanowm/b657yksg/

Answer 5

I wrote an ES6 module that pack PNG files into ICO container: PNG2ICOjs. Everything works in modern browsers without any dependency.

import { PngIcoConverter } from "../src/png2icojs.js";

// ...

const inputs = [...files].map(file => ({
    png: file
}));

// Result is a Blob
const resultBlob1 = await converter.convertToBlobAsync(inputs); // Default mime type is image/x-icon
const resultBlob2 = await converter.convertToBlobAsync(inputs, "image/your-own-mime");

// Result is an Uint8Array
const resultArr = await converter.convertAsync(inputs);

Answer 6

this should works

github url:https://github.com/egy186/icojs

<input type="file" id="input-file" />
<script>
  document.getElementById('input-file').addEventListener('change', function (evt) {
    // use FileReader for converting File object to ArrayBuffer object
    var reader = new FileReader();
    reader.onload = function (e) {
      ICO.parse(e.target.result).then(function (images) {
        // logs images
        console.dir(images);
      })
    };
    reader.readAsArrayBuffer(evt.target.files[0]);
  }, false);
</script>

Answer 7

Fully working example.

Here is JSFiddle: click (use it because this site's Code snippet do not allow me to click on a[download] link), but other code is working in code snippet - you can open links in new tab to see it.

var MyBlobBuilder = function() {
  this.parts = [];
}

MyBlobBuilder.prototype.append = function(part) {
  this.parts.push(part);
  this.blob = undefined; // Invalidate the blob
};

MyBlobBuilder.prototype.write = function(part) {
  this.append(part);
}

MyBlobBuilder.prototype.getBlob = function(atype) {
  if (!this.blob) {
    this.blob = new Blob(this.parts, {
      type: !atype ? "text/plain" : atype
    });
  }
  return this.blob;
};

const img = document.getElementById('input'),
  a = document.getElementById('a'),
  a2 = document.getElementById('a2'),
  file1 = document.getElementById('file');
let imgSize = 0,
  imgBlob;

img.onload = e => {
  fetch(img.src).then(resp => resp.blob())
    .then(blob => {
      imgBlob = blob;
      imgSize = blob.size;
    });
};

function convertToIco(imgSize, imgBlob) {
  let file = new MyBlobBuilder(),
    buff;

  // Write out the .ico header [00, 00]
  // Reserved space
  buff = new Uint8Array([0, 0]).buffer;
  file.write(buff, 'binary');

  // Indiciate ico file [01, 00]
  buff = new Uint8Array([1, 0]).buffer;
  file.write(buff, 'binary');

  // Indiciate 1 image [01, 00]
  buff = new Uint8Array([1, 0]).buffer;
  file.write(buff, 'binary');

  // Image is 50 px wide [32]
  buff = new Uint8Array([img.width < 256 ? img.width : 0]).buffer;
  file.write(buff, 'binary');

  // Image is 50 px tall [32]
  buff = new Uint8Array([img.height < 256 ? img.height : 0]).buffer;
  file.write(buff, 'binary');

  // Specify no color palette [00]
  // TODO: Not sure if this is appropriate
  buff = new Uint8Array([0]).buffer;
  file.write(buff, 'binary');

  // Reserved space [00]
  // TODO: Not sure if this is appropriate
  buff = new Uint8Array([0]).buffer;
  file.write(buff, 'binary');

  // Specify 1 color plane [01, 00]
  // TODO: Not sure if this is appropriate
  buff = new Uint8Array([1, 0]).buffer;
  file.write(buff, 'binary');

  // Specify 32 bits per pixel (bit depth) [20, 00]
  // TODO: Quite confident in this one
  buff = new Uint8Array([32, 0]).buffer;
  file.write(buff, 'binary');

  // Specify image size in bytes
  // DEV: Assuming LE means little endian [84, 01, 00, 00] = 388 byte
  // TODO: Semi-confident in this one
  buff = new Uint32Array([imgSize]).buffer;
  file.write(buff, 'binary');

  // Specify image offset in bytes
  // TODO: Not that confident in this one [16]
  buff = new Uint32Array([22]).buffer;
  file.write(buff, 'binary');

  // Dump the .png
  file.write(imgBlob, 'binary');

  return file.getBlob('image/vnd.microsoft.icon');
}

function test() {
  const ico = convertToIco(imgSize, imgBlob);

  let url = window.URL.createObjectURL(ico);
  a.href = url;
  document.getElementById('result1').style.display = '';
}

file1.addEventListener('change', () => {
  var file = file1.files[0];
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arrayBuffer = e.target.result;
    const blobFile = new Blob([arrayBuffer]);
    const ico = convertToIco(blobFile.size, blobFile);
    let url = window.URL.createObjectURL(ico);
    a2.href = url;
    document.getElementById('result2').style.display = '';
  }
  fileReader.readAsArrayBuffer(file);
});

.section {
  padding: 4px;
  border: 1px solid gray;
  margin: 4px;
}

h3 {
  margin: 0 0 4px 0;
}

<div class="section">
  <h3>Convert img[src] to ICO</h3>
  <div>
    Example (PNG): <img src="https://gist.githubusercontent.com/twolfson/7656254/raw/c5d0dcedc0e212f177695f08d685af5aad9ff865/sprite1.png" id="input" />
  </div>

  <div>
    <button onclick="test()">Conver to ICO</button>
  </div>

  <div id="result1" style="display:none">
    Save ICO: <a id="a" href="#" download="example.ico">click me</a>
  </div>
</div>

<div class="section">
  <h3>Convert input[type=file] to ICO</h3>
  <input type="file" id="file" />
  <div id="result2" style="display:none">
    Save ICO: <a id="a2" href="#" download="example.ico">click me</a>
  </div>
</div>

P.S. Used documentation: Wikipedia.