0

スマホ向けアプリをhtml5で作っています。
アプリの中でCanvasを使って画像を作成していまして、その画像をiOSのカメラロールに保存する方法が分かりません。
(描写は出来ています)

お絵描きアプリと画像の保存処理の実装

こちらを参考に保存は出来ましたが、保存ディレクトリが希望の物になりません。
(このディレクトリだとサンドボックス内に保存されるので、見ることが出来ません)

InAppBrowser にてロングタップによる保存を試してみましたが、アプリブラウザ(_blank)では保存出来ませんでした。
ブラウザの種類をOS依存で表示させてみようと、targetに_systemを指定すると、「既にログインされています。ログアウトして再度QRコードを読み取って下さい」と意味不明なポップアップがデます。

どうすればいいでしょうか。分かる方ご教授願います。

追記
色々試した結果、外部リンクのURLにbase64(バイナリ?)を指定するとおかしくなるようです。
Blob等で試してみましたが、結果は変わらず、同様のポップアップが出るだけでした。
これは仕様なのでしょうか?

0

2 件の回答 2

1

どうして保存できないのか現状をもう少し説明してください。
Errorなどコンソールは確認していますか?
それとも未着手状態で方法が分からないのでしょうか?


1.DataURLが発行できない場合
こちら合成する素材は外部リソースでしょうか?
保存するためにはCanvasからgetImageDataやtoDataURLを使用するかと思いますが、
Canvasのセキュリティの仕様でソースが存在する元と違うドメインのリソースを読み込んだ場合、
SecurityErrorが発生し取得することが出来なくなります。

同一生成元ポリシー

ですのでFileTransferを使用して外部をリソースをダウンロードし、
同一オリジンに持ってきた後で合成してはいかがでしょう?
(もしくは画像編集・生成のプラグインを使用してネイティブ側で操作するか…)


2.保存方法について
保存方法についてはプラグインを使用する方法と
DataURLからブラウザを開きユーザに保存させる方法の2種類があります。

プラグインについては既に出ているようなので
(※他にもこんなプラグインもありますが)
ユーザに保存させる方法ですが、
デフォルトの動作として作成したアプリはロングタップでメニューが出ないようになっていたかと思います。
(META辺りに書いていたような気がします)
ですので、手っ取り早いのはwindow.open(url, '_system')
OSのデフォルトブラウザで開くのが早いのではないでしょうか?

ただし1つだけ注意なのですが、
あまりURLが長くなると自動でページが開きません。
(※ブラウザでエラーが出たような気がします。)
URL欄には入力されているはずなのでユーザ自信に確定して遷移してもらう形になるかと思います。


本家SOの同じ質問

5
  • コメントありがとうございます。 2についてなのですが、一番手っ取り早くOSブラウザからロングタップで保存を促す方法を最初に実施しましたが、本文にある通り、targetに_systemを指定すると、変なポップアップが出てしまいます。blob Urlに変換したりと試してみましたが、駄目でした。 その為、DataUrlは指定出来ないのでは?と思い、他の方法を模索している所でした。
    – 100K
    Commented 2017年1月21日 1:54
  • 自動でページが開かないだけでURLを選択後に確定しても開かないでしょうか?
    – user10259
    Commented 2017年1月21日 2:14
  • URL自体は間違っていないと思います。targetに_blankを指定すると、アプリ内ブラウザで開け、画像が見れます(ですが、ロングタップが不可能となります)
    – 100K
    Commented 2017年1月21日 2:17
  • 上手く伝わっていないようでそういう意味ではないのですが……、今わたしの方で検証できないので正確に何処とはお伝えできませんが、もしアプリの中で開いて保存させるのであればMETA等で無効にしているオプション等を削除するか、プラグインを使用するしかないのではないでしょうか?
    – user10259
    Commented 2017年1月21日 3:54
  • プラグインでなんとか出来ないか、もう一方の意見を参考に挑戦してみようと思います。お手数をお掛けしましたm(__)m
    – 100K
    Commented 2017年1月21日 4:00
0

以下のプラグインを使用されてみてはいかがでしょうか
https://github.com/quiply/SaveImage

追記
リンク先のExampleそのままですが、以下のように使用します。

window.cordova.plugins.imagesaver.saveImageToGallery(
    サンドボックス内に保存した画像のファイルパス,
    onSaveImageSuccess, onSaveImageError);

function onSaveImageSuccess() {
  console.log('--------------success');
}

function onSaveImageError(error) {
  console.log('--------------error: ' + error);
}
5
  • 回答有難うございます。 リンク先のプラグインを確認した所、希望通りの動作になりそうです。 ですが、使い方が分かりませんでした。 よろしければ、使い方を教えていただけないでしょうか。
    – 100K
    Commented 2017年1月21日 0:46
  • 回答に追記致しました。具体的に使い方のどこがわからないかを示していただくと回答しやすくて助かります。
    – maot
    Commented 2017年1月21日 1:00
  • サンプルありがとうございます。 勘違いをしていまして、一旦画像を保存→カメラロールに再度保存、という経路になるんですね。 ただこれですと、UUIDを指定しないといけなさそうです。 UUIDはjavascriptでは取得できないと勉強しており、実装は難しそうですm(__)m
    – 100K
    Commented 2017年1月21日 1:13
  • アプリのサンドボックス内に保存できたということでしたので、一旦画像を保存に関しては問題ないかと思っていました。CordovaのFileプラグインではiOSの/var/mobile/Applications/<UUID>/の任意のフォルダに保存可能です。javascriptからUUIDを意識する必要はありません。CordovaのFileプラグインのiOS File System Layoutを参照してみてください。github.com/apache/cordova-plugin-file#ios-file-system-layout
    – maot
    Commented 2017年1月21日 1:24
  • なるほど、UUIDは意識しなくても良いんですね!色々試してみたのですが、Error in Success callbackId: File726837806 : TypeError: undefined is not an object (evaluating 'window.cordova.plugins.imagesaver')とエラーが出てしまいます。プラグインのインストールは上手く行ってるはずですが・・・もう少し試してみます。色々ありがとうございます。
    – 100K
    Commented 2017年1月21日 2:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。