こちらで実装されている機能の紹介です。

https://archlinuxjp.github.io/archcard-jp/

画像ファイルを読み込んでプレビューする

https://github.com/ArchLinuxJP/archcard-jp/pull/4

file-preview.js

// http://www.html5rocks.com/en/tutorials/file/dndfiles/

function handleFileSelect(evt) {
  var files = evt.target.files;
  for (var i = 0, f; f = files[i]; i++) {
    if (!f.type.match('image.*')) {
      continue;
    }
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
           document.getElementById('Edit').innerHTML += ['<image id="Pic" xlink:href="' +  e.target.result + '" title="' + escape(theFile.name) + '" height="106" width="106" y="17.7" x="17.7" preserveAspectRatio="none"/>'].join();
      };
    })(f);
    reader.readAsDataURL(f);
  }
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

あとは、ファイルを読み込むボタンを追加

index.html

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

PNGやSVGをダウンロード

https://github.com/ArchLinuxJP/archcard-jp/pull/6

$ npm i -s save-svg-as-png

index.html

<md-button id="archcard-png" onclick="download();">Download</md-button>
<style> #archcard-png{float:right;margin-right:30px}</style>
<script type="text/javascript" src="node_modules/save-svg-as-png/saveSvgAsPng.js"></script> 
<script>
function download(){
	saveSvgAsPng(document.getElementById("card"), "archcard.png");
}
</script>

そういえばGitHub Pagesはデフォルトで./node_modules以下を読み込まなってる気がするので、フォルダを変更しておくといいかもしれません。