【Webアプリ制作】ブラウザ上で加工した画像をPCやスマホに保存する（canvasの保存）

はじめに

【ツール制作】Webで動く目線加工ツールを作る - ム空間雑記:||

↑記事で製作した目線加工アプリでぶち当たった課題について、どういう流れで苦しんで、解決に至ったかをまとめる。

1）ユーザーが画像ファイルをブラウザにUPする

2）画像をブラウザcanvasに描画する

3）その上から目線やモザイクを上乗せしていく

　⇒操作ごとに確定しない！Undoで戻せるようにするため

4）保存ボタンでローカルへ出力

　⇒これです。これが超絶苦しんだ。

canvasからの保存、以外に単純じゃない問題

とりあえず色々手法を試した軌跡を書いておく。

その1：保存ボタンは1つ（クリック一発DL）

即座にPCではダウンロードフォルダに保存される。

まぁ普通だよね。

でもスマホではどうなる？

自分はiPhoneなのでAndroid環境は分からないんだけど、iPhoneではファイルってフォルダに入るわけ。

でもそれじゃ使えないのよ。

何故ならカメラロールじゃないから。

写真編集したら、やはりカメラロールに入れたい。

一応ファイルからカメラロールに移動はユーザー側で操作できるけど、そんな面倒なこと無理。

その2：保存ボタンは1つ（画像を別窓で開く）

次に試したのがこれだ。

ボタンを押すと別窓で編集済みの画像単体が開く。

PCでは右クリック保存できるし、スマホでも長押ししてカメラロールに保存ができる・・・と”考えていた”

GPT君もこれならいけるって言ってくれたのに・・・。

PCでは想定通りに操作できた。

しかしスマホでは画像は開くのに長押し保存できないんだ。

これ実は画像がblob URLとなっているせいだ。

Blob = Binary Large Object

メモリ上にあるバイナリデータの塊。

そう、まだこの時点で画像ファイルではないのである・・・！

PC環境だとどうやらblobでも画像扱いで保存できるみたい。

しかしスマホではダメなんだ（少なくともiphoneでは）

ただし、どうにか弄りまくると保存できなくはなかった。

保存ボタン⇒別窓（blob）で画像表示⇒長押しでさらに別窓表示⇒長押し保存

こんなアホみたいなことすると、何故か保存できた。

理由は分からんけど、PCでのChromeブラウザがblobを画像扱いできるので、スマホChromeも抜け穴があったのかもしれん。

とにかく、こんなアホみたいな操作してられないので断念した。

その3：保存ボタン1つ（ユーザー環境によって挙動を分ける）

次に試したのはこれだ。

PCなら一発保存。

スマホなら「共有シート」を開くってやつ。

共有シートってのは、画像とかを長押しした時に出るのとほぼ同じだね。

SNSでの送信や、写真保存の項目があるメニューを開くことができる。

これならスマホで保存できる。

そして保存ボタンは一つにして見た目すっきり。

これで勝つる・・・と思っていた。

結果的にダメでした。

PCはOKでもスマホで開いてるのにPC保存になる等の誤作動が頻発した。

検出方法としては、画面タッチを検出してスマホ扱いするとか画面解像度が小さければスマホ扱いする、等と色々あるんだけど。

ipadだとそもそも解像度デカい、ブラウザによってはPC表示モードのせいで小さいスマホでもPC扱いされてしまうらしい。

非常に不安定なためこれも断念。

その4：保存ボタン2つ（PCとスマホ向け共有シート）

これです。

結果、これで解決しました。

PC向けでは一発DL（ダウンロードフォルダへ）

スマホ向けでは共有シートを開いて画像保存とかSNS送信できる。

一応、共有シートはPCでも表示はできるので、別に変な挙動にはならない。

当初はボタン一つに絞りたかったけど、これ以上時間をかけるわけにはいかなかった。

さいごに

まさかこんなことで躓くと思わんかった。

さすがにAI活用といっても、自分の経験のないところを手探りでやる以上は、思ったよりは時間かかるもんだな。

とはいえほぼゼロ知識から完成に漕ぎつけられるのは、さすが技術の進歩ということか・・・。