htmlページを動的に画像化、保存する②

htmlページを動的に画像化、保存したい

別ページに推移しながら画像を表示させるように変更。
base64にした画像をlocalStorageに保存→次のページに推移、imgタグにlocalStorage.getItemでいったん変数に値を入れてからimgタグに出力。

今後
・IE対応
・OG画像に設定
します。
下記とも組み合わせたい

入力項目を動的に増減

↓組み合わせました
デモ

JavaScript 最初のページ

    $(document).ready(function(){
    $("#btn-Preview-Image").on("click", function() {
    html2canvas(document.querySelector("#capture"),{scale:1}).then(canvas => {
    var imageData = canvas.toDataURL();
    document.getElementById('canvas-image').setAttribute("src",canvas.toDataURL());
      localStorage.setItem('Key', imageData);
      location.href = './sample.html';
    });
    });
    });

推移後のページ



デモ

デモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です