Javascriptで生成した画像をスマホで一括ダウンロード

Question

前提・実現したいこと

input要素で入力された画像を加工した結果をimgタグで複数表示して、それらを一括ダウンロードする機能を作成中です。

「Javascript 画像 ダウンロード」などのワードで調べると「試したこと」に記載のコードが出てくるのですが、PCでは所望の動作となることが確認できていますがスマホではうまくいっておりません。

試したこと

以下必要な部分だけの切り出しです。

const img = 「imgタグ」
const cvs = document.createElement('canvas')
const ctx = cvs.getContext('2d')
ctx?.drawImage(img, 0, 0, img.width, img.height)
const a = document.createElement('a')
a.href = cvs.toDatURL()
a.download = 'hoge.png'
a.click()

PCで実施した際には正常に画像のダウンロードがされることを確認できましたが、スマホ(iPhoneのchrome)では「document」というファイルが保存されるだけで「写真アプリ」に保存されることはありませんでした。

世の中に出ているWebアプリを見てみるとスマホ用に同様の機能を提供されているものを見た覚えがないような気がするので、そもそもスマホでは「長押しからの写真に保存」以外で写真アプリに画像を保存させることはできないのでしょうか。

補足情報（FW/ツールのバージョンなど）

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.4.4",

Answer 1

iOSではdownload属性がサポートされていなかったと思います。
ファイル保存に特化したライブラリ(FileSaver.js)のREADMEに詳しく事情が説明されているようです。
(このライブラリを使用することで現状での最善の状態にはできそうですね!)

eligrey/FileSaver.js: An HTML5 saveAs() FileSaver implementation

Comments

[退会済みユーザー]

丁寧なご回答ありがとうございます！

iOSで保存をさせることはできませんでしたが、FileSaver.jsを使うことで「document」なる変なファイルが保存される状況をなくすことができました！