

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

[お絵描きアプリと画像の保存処理の実装](http://blog.asial.co.jp/1313)

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

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

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

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


CC BY-SA 4.0
2017-01-20T17:46:23.917
32030
2022-07-11T03:03:50.363
2020-01-31T07:10:45.280
2238
20324
question
javascript angularjs cordova html5-canvas
Canvasで作った画像をカメラロールに保存する


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

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

[code]

    window.cordova.plugins.imagesaver.saveImageToGallery(
        サンドボックス内に保存した画像のファイルパス,
        onSaveImageSuccess, onSaveImageError);
    
    function onSaveImageSuccess() {
      console.log('--------------success');
    }
    
    function onSaveImageError(error) {
      console.log('--------------error: ' + error);
    }
    
[/code]


CC BY-SA 3.0
2017-01-21T00:06:37.553
32032
2017-01-21T00:58:45.893
2017-01-21T00:58:45.893
20272
20272
32030
answer


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

* * *

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

[同一生成元ポリシー](https://developer.mozilla.org/ja/docs/Web/Security/Same-
origin_policy)

ですので[FileTransfer](https://cordova.apache.org/docs/en/latest/reference/cordova-
plugin-file-transfer/)を使用して外部をリソースをダウンロードし、  
同一オリジンに持ってきた後で合成してはいかがでしょう？  
(もしくは画像編集・生成のプラグインを使用してネイティブ側で操作するか…)

* * *

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

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

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

* * *

[本家SOの同じ質問](https://stackoverflow.com/questions/22851169/)


CC BY-SA 3.0
2017-01-21T01:35:54.010
32034
2017-01-21T04:08:50.853
2017-05-23T12:38:56.083
-1
32030
answer