generate-pngs.html

This simple HTML page converts svgs to pngs by drawing them to a canvas which the browser can then save/copy. Instructions:

1. Press the generate image button
2. Right click on the newly drawn image and save or copy it

Comments:

- The generated images don't seem to come out that good on macOS
- To generate an image of another size you need to change the width and height on both the canvas on this page and on the svg element in the file.

<hr>
<canvas id="logo-canvas" width="140" height="140"></canvas>
<img id="logo" src="logo.svg"/>
<button id="logo-button">Generate</button>
<hr>
<canvas id="logo-inverse-canvas" width="140" height="140"></canvas>
<img id="logo-inverse" src="logo-inverse.svg"/>
<button id="logo-inverse-button">Generate</button>
<hr>
<canvas id="logo-inverse-bg-canvas" width="140" height="140"></canvas>
<img id="logo-inverse-bg" src="logo-inverse-bg.svg"/>
<button id="logo-inverse-bg-button">Generate</button>
<hr>
<canvas id="logo-full-canvas" width="505" height="140"></canvas>
<img id="logo-full" src="logo-full.svg"/>
<button id="logo-full-button">Generate</button>
<hr>
<canvas id="logo-full-inverse-canvas" width="505" height="140"></canvas>
<img id="logo-full-inverse" src="logo-full-inverse.svg"/>
<button id="logo-full-inverse-button">Generate</button>
<hr>
<canvas id="logo-full-inverse-bg-canvas" width="505" height="140"></canvas>
<img id="logo-full-inverse-bg" src="logo-full-inverse-bg.svg"/>
<button id="logo-full-inverse-bg-button">Generate</button>

<script>
  [
    'logo',
    'logo-inverse',
    'logo-inverse-bg',
    'logo-full',
    'logo-full-inverse',
    'logo-full-inverse-bg'
  ].forEach(id => {
    var canvas = document.querySelector('#' + id + '-canvas');
    canvas.style.width = (canvas.width / window.devicePixelRatio) + 'px';
    canvas.style.height = (canvas.height / window.devicePixelRatio) + 'px';
    document.querySelector('#' + id + '-button').addEventListener('click', () => {
      generateImage('#' + id);
    });
  });

  function generateImage(id) {
    var canvas = document.querySelector(id + '-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(document.querySelector(id), 0, 0, canvas.width, canvas.height);
  }
</script>