html上にある任意の表部分のみキャプチャを取得しユーザーに返したいです。iphoneやAndroid,PCで代わりなく動作するものだと嬉しいです。

Question

前提・実現したいこと

html上にある任意の表部分のみキャプチャを取得しユーザーに返したいです。
iphoneやAndroid,PCで代わりなく動作するものだと嬉しいです。

表だけを指定するのか、表の前後にタグ等を置いて範囲を指定するのか、
任意の部分のみキャプチャ取得したいと考えております。
キャプチャのデータはjpgだと嬉しいです。

該当のソースコード

  <div id="target">
  <table class="imageTable">
    <tr>
          <td><img src="https://placehold.jp/150x150.png?text=A1"></td>
          <td><img src="https://placehold.jp/150x150.png?text=A2"></td>
          <td><img src="https://placehold.jp/150x150.png?text=A3"></td>
        </tr>
  </table>
  </div>
<hr>
  <h3>target範囲内を画像化<h3>
  <img src="" id="result" />
  <hr>

  <a href="" id="ss" download="target.png">出力</a>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
  <script type="text/javascript" src="test.js"></script>

//test.js
//ロードされた際の処理として実施：
window.onload = function(){

  //HTML内に画像を表示
  html2canvas(document.getElementById("target"),{
    onrendered: function(canvas){
      //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
      var imgData = canvas.toDataURL();
      document.getElementById("result").src = imgData;
    }
  });

  //ボタンを押下した際にダウンロードする画像を作る
  html2canvas(document.body,{
    onrendered: function(canvas){
      //aタグのhrefにキャプチャ画像のURLを設定
      var imgData = canvas.toDataURL();
      document.getElementById("ss").href = imgData;
    }
  });
}

Answer 1

[JavaScript] JSだけでスクリーンショットを撮ってダウンロードもする方法 - Qiita

上記の記事を参考にして、自身で頑張ってみて下さい。

Comments

[20200713]

ご助言いただいたhtml2canvasについて調べており遅くなりました。
その上でお伺いできましたら嬉しいのですが、
①指定した範囲を画像に変換する部分について、キャプチャをとる範囲に含まれる画像ファイルがローカルだとうまく反映されるのですが、上記のようなダミー画像だと表示されませんでした。
②現時点ではページ全体のキャプチャを保存することができるのですが、①で画像化したもののみをダウンロードさせるに至っておりません。

毎度お手数おかけして申し訳ございませんが、
もし可能でしたらアドバイスいただけませんでしょうか…！

[miyabi_pudding]

var imgData = canvas.toDataURL();

で、生成したURLをブラウザで叩いてみましたか？
おそらく、
base64:で始まるURLになるはずです。
そこからは簡単で、
base64 javascript ダウンロード
などの検索キーワードで探せば方法が出てくるはずです。

[20200713]

ご回答いただきありがとうございます！
お教えいただいたcanvas.toDataURL();について調べまして、
var download_link = document.getElementById("result_url")
download_link.href = canvas.toDataURL();
としまして、無事指定した範囲の画像を取得できるようになりました…！

丁寧にお教えいただきありがとうございました。
html2canvasについて引き続き勉強してみます！