イシュー「PNGやJPEG書き出しがしたい #13」の対応。
作ったもの
「ファイルメニュー」-「書き出し」-「PNG形式」または「JPEG形式」をクリックすると
アクティブなお絵かきエリアの描画内容をPNGまたはJPEGでローカルに保存できる。
クラス図
新たなクラスはなし。
主にLocalConnectorクラスに画像書き出しに関する記述を追記した。
つまづきポイント
Javascriptだけで画像生成ができる
Canvasに描画している内容は、Javascriptの処理だけでPNGやJPEG画像として保存できる。
PHPなどに送らないよいので便利。
参考：【JavaScript】 Canvasの画像をPNG/JPEGとして保存（ダウンロード）する
File System Access APIはセキュアコンテキストな環境でのみ利用可能
httpsやlocalhostでのみアクセスできる。
参考：Window.showSaveFilePicker() – Web API | MDN
CanvasはDOMツリーに追加しなくても画像化できる
document.createElement(“CANVAS”)で作ったCanvasで
DOMツリーに追加しないいまま
描画→画像作成しても、問題なく画像を書き出せる。
追加したイシュー
ひとこと
画像出力を前提とした別のシリーズのアイデアを思いついた…
気が向いたらやる。
