html2canvasで保存した画像が半端になる

いくつかのイメージを重ね、オリジナルの画像をカスタマイズできる、ウェブサービスを作成中です。
そのカスタムページは主にjqueryとcssを使用して実現しており、canvasで描画はしておりません。

**"#custom"**という大枠のDIV
**"#custom > #inner"**というイメージを反映させるDIVに
それぞれclass指定やpictureのdisplay表示非表示などで対応しております。

そのカスタマイズした画像(画面)を画像保存したいと思い以下のソースをネットから拝借いたしました。


　// HTML箇所
  <input id="downloadImageButton" style="width:120px;" type="button" value="画像保存" onclick="getDisplayImage();" >
  <a id="getImage" href=""  style="display:none;"  download="image.png">画像保存</a>


　// JS箇所
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha2/html2canvas.min.js"></script>

  <script type="text/javascript">

    function getDisplayImage(){
      //html2canvas実行
      html2canvas(document.getElementById("custom")).then(function(canvas) {
        downloadImage(canvas.toDataURL());
      });
    }

    function downloadImage (data) {
      var fname ="testimage.png";
      var encdata= atob(data.replace(/^.*,/, ''));
      var outdata = new Uint8Array(encdata.length);
      for (var i = 0; i < encdata.length; i++) {
        outdata[i] = encdata.charCodeAt(i);
      }
      var blob = new Blob([outdata], ["image/png"]);

      if (window.navigator.msSaveBlob) {
        //IE用
        window.navigator.msSaveOrOpenBlob(blob, fname);
      } else {
        //それ以外？
        document.getElementById("getImage").href=data;      //base64そのまま設定
        document.getElementById("getImage").download=fname;   //ダウンロードファイル名設定
        document.getElementById("getImage").click();      //自動クリック
      }
    }

  </script>