htmlで表示された画像を幾つか選択した後出力ボタンを押すと、 チェックのついた画像が並んで整理された新しいjpgを出力するようにしたいです。

Question

前提・実現したいこと

html上で表示した画像のうち任意のものを選択したあと出力ボタンを押すと、
チェックのついた画像が並んで整理された新しいjpgを出力するようにしたいです。

発生している問題

当方htmlやjsは初心者のため理解が浅く申し訳ないのですが、
html、jsのみを用いて新たに画像を生成し、ユーザーに返すような仕組みは可能なのでしょうか。

該当のソースコード

<table class="caTable">
　<tr>
　　<td><input checked type="checkbox" onClick="allChecked_checkbox('cg_01',this);">全選択</td>
　　<td><img src="./img/test1.jpg" id="ca01"><input checked type="checkbox" name="cg_01" id="cb01"></td>
　　<td><img src="./img/test2.jpg" id="ca02"><input checked type="checkbox" name="cg_01" id="cb02"></td>
　</tr>
</table>
<input checked type="button" value="出力">

function allChecked_checkbox(pcg,checkbox){
  if (checkbox.checked) {
    for(count = 0; count < document.form1[pcg].length; count++){
      document.form1[pcg][count].checked = false;
      document.form1[pcg][count].click();
      }
  } else {
      for(count = 0; count < document.form1[pcg].length; count++){
        document.form1[pcg][count].checked = true;
        document.form1[pcg][count].click();
        }
  }
}

Answer 1

画質にこだわらなければcanvasに描画してtoDataURLで可能なようです。再圧縮がかかりますし画質の細かい設定ができませんが。
HTMLCanvasElement.toDataURL()
なおIEは一手間増えるようです。
JavaScriptでcanvasをファイルに保存する方法（IE対応も）

Comments

[20200713]

回答ありがとうございます！
表に画像を貼って整理している状態なのですが、
任意の列や行だけを、画面に見えている状態のまま画像にして返す、ということは可能なのでしょうか…？
複雑なご相談で申し訳ございませんが、ご教授いただけましたら助かります…！

[ikadzuchi]

HTMLによるレイアウトはcanvasとは別なので、まずcanvas上でそれを再現しなければなりません。
まずはcanvasの扱いを覚えるところからですかね。

[20200713]

アドバイスいただいたように、一度canvasでの描画を勉強してみます！
この度は助言いただきありがとうございました！！