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

フレ石編成的ななにかでは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へ反映させますね。
ちなみに微妙にぼやけにくくなった感じします。
ディスカッション
コメント一覧
まだ、コメントがありません