部分スクリーンショットで画像が撮れない

Question

前提・実現したいこと

要素のスクリーンショットで画像も撮れるようにしたい

発生している問題・エラーメッセージ

画像１の部分を<div id="nameplate">で囲んでいます。これは画像1枚と文字2行で出来ているのですが、部分スクリーンショットを実行すると文字しかスクリーンショットされません。
画像2が実際にスクリーンショットした画像です。
画像１画像２

該当のソースコード

window.onload = function(){
  html2canvas(document.getElementById("nameplate"),{
    onrendered: function(canvas){
      var data = canvas.toDataURL("image/png");
      document.getElementById("ss").href = data;
    }
  });
}

試したこと

bodyをスクリーンショットしても画像はやはり撮れていません。

Comments

[mather]

html2canvas の使い方は何を参考にしましたか？最新版では onrendered が削除されていますが…。
また、<div id="nameplate"> の部分はbackground-imageやfont-sizeなどのCSSのみでスタイルを適用していますか？
サポートされるCSSの一覧： https://html2canvas.hertzen.com/features

[退会済みユーザー]

div要素にimgタグで画像を表示していたらスクリーンショットで省かれますか？

Answer 1

onrendered は現在使えなくなっています。

Promise を返す最新のAPIを使いましょう。

実装例

外部の画像を使った場合は allowTaint などを有効にする必要があり、その場合は toDataURL が使えないようです。

Comments

[退会済みユーザー]

Uncaught TypeError: html2canvas(...).then is not a function
というエラーが出るのですが、どうすればいいですか？
夜分遅くに回答して頂き本当にありがとうございます。

[mather]

html2canvasのバージョンが古いです。
古いバージョンでなければいけない理由があれば、現在のバージョンと具体的な理由を追記してください。
ライブラリに関しては基本的に脆弱性対応や古いバージョンに対するドキュメントが消されて保守が難しくなるなどの理由で、できるだけ新しいバージョンを利用することをオススメします。
もし現在のバージョンがわからない、などありましたら、そもそも参考にしたサイトなどを提示しましょう。