html2canvasのv1.0.0-alpha.9にて、ナゾの余白ができるお話。

技術

この記事は2018年1月29日に書かれたものです。ご注意ください。

フレ石編成的ななにかではhtml2canvasの「0.5.0-alpha1」をずっと利用してきたのですが、気づいたら「v1.0.0-alpha.9」がリリースされていたので、これを使おうと思いコードを少し編集しました。
https://github.com/niklasvh/html2canvas

いままでは以下のコード。

var $summon_screeen = $('#summon_screeen');
html2canvas($summon_screeen, {
  onrendered: function (canvas) {
    var imgData = canvas.toDataURL();
    $('#screen_image').attr('src', imgData);
  }
});

v1.0.0-alphaからは以下のようにPromiseを利用するようになりました。

var $summon_screeen = $('#summon_screeen');
var target = $summon_screeen.get(0);
html2canvas(target).then(function(canvas) {
  var imgData = canvas.toDataURL();
  $('#screen_image').attr('src', imgData);
});

これだけなら(IEの件を除けば)特に問題はありません。
そう思っていました。

「とりあえずIEは置いといてChromeで試そう!」と思い試したところ、以下のような画像が生成されました。

いままでの画像はこうです。

わかりますかね?左側にナゾの余白ができているんです…(クリックしてもらうと分かりやすい)
そのせいで右側が切れちゃってるし…
は~(°~°)?????キレそーーwwwwwwwwwwww

Q. で、この余白はなんなの?

A. スクロールバーが表示される分の余白なのだ。

スクロールバーを消せば余白も消える、ということじゃ。

つまり
・画像生成前に「スクロールバーを消すClass」をaddClass
・ノードをhtml2canvasに受け渡した後に「スクロールバーを消すClass」をremoveClass
で解決じゃよ!!

とりあえず以下CSSを追加して、JSでClass追加・削除をすることで解決はしました。IE以外は…
(es6-promiseを先に読み込ませても動かないんだけど、何か悪いのかな…?)

.scrollbar {
  overflow-y: hidden;
}

IEの対応ができ次第masterへ反映させますね。
ちなみに微妙にぼやけにくくなった感じします。