png2icon

Generate ico file from multiple png

by vanowm

HTML

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

JavaScript

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,...