質問: スマホ向けアプリをhtml5で作っています。 アプリの中でCanvasを使って画像を作成していまして、その画像をiOSのカメラロールに保存する方法が分かりません。 (描写は出来ています) お絵描きアプリと画像の保存処理の実装 こちらを参考に保存は出来ましたが、保存ディレクトリが希望の物になりません。 (このディレクトリだとサンドボックス内に保存されるので、見ることが出来ません) InAppBrowser にてロングタップによる保存を試してみましたが、アプリブラウザ(_blank)では保存出来ませんでした。 ブラウザの種類をOS依存で表示させてみようと、targetに_systemを指定すると、「既にログインされています。ログアウトして再度QRコードを読み取って下さい」と意味不明なポップアップがデます。 どうすればいいでしょうか。分かる方ご教授願います。 **追記** 色々試した結果、外部リンクのURLにbase64(バイナリ?)を指定するとおかしくなるようです。 Blob等で試してみましたが、結果は変わらず、同様のポップアップが出るだけでした。 これは仕様なのでしょうか?
回答: どうして保存できないのか現状をもう少し説明してください。 Errorなどコンソールは確認していますか? それとも未着手状態で方法が分からないのでしょうか? 1.DataURLが発行できない場合 こちら合成する素材は外部リソースでしょうか? 保存するためにはCanvasからgetImageDataやtoDataURLを使用するかと思いますが、 Canvasのセキュリティの仕様でソースが存在する元と違うドメインのリソースを読み込んだ場合、 SecurityErrorが発生し取得することが出来なくなります。 同一生成元ポリシー ですのでFileTransferを使用して外部をリソースをダウンロードし、 同一オリジンに持ってきた後で合成してはいかがでしょう? (もしくは画像編集・生成のプラグインを使用してネイティブ側で操作するか...) 2.保存方法について 保存方法についてはプラグインを使用する方法と DataURLからブラウザを開きユーザに保存させる方法の2種類があります。 プラグインについては既に出ているようなので (※他にもこんなプラグインもありますが) ユーザに保存させる方法ですが、 デフォルトの動作として作成したアプリはロングタップでメニューが出ないようになっていたかと思います。 (META辺りに書いていたような気がします) ですので、手っ取り早いのは`window.open(url, '_system')`で OSのデフォルトブラウザで開くのが早いのではないでしょうか? ただし1つだけ注意なのですが、 あまりURLが長くなると自動でページが開きません。 (※ブラウザでエラーが出たような気がします。) URL欄には入力されているはずなのでユーザ自信に確定して遷移してもらう形になるかと思います。 本家SOの同じ質問