いつもお世話になております。
クラウドIDEのmonacaとNiftyCloudMobileBackendを使って開発をしているのですが、
複数の画像をファイルストアに保存したり取得したりしたいのです。
ところが調べたところmonaca向けにはファイルストアの機能が提供されていない。
ということですが、JavaScriptでは使えるんですよね。
そしたらmonacaでjs使って書けばいいじゃないか?となるのですが、
(ドキュメント等でも)monacaとjavascriptが分かれているのはどういうことなんでしょう?違いはなんですか?
また、今のところはmonacaにjavascriptSDKを組み込んでbase64に変換してファイルストアに保存しているのですが、
1件ずつしかできないので複数保存する方法と、他に良い方法をご存知でしたらご教授いただきたく思います。
html
1<head> 2<script> 3 var appKey = "xxxxxxxxx"; 4 var clientKey = "xxxxxxxxx"; 5 var fileName = "uploaded.jpg"; //保存File名 6 7 ///// Called when app launch 8 $(function() { 9 NCMB.initialize(appKey, clientKey); 10 }); 11 12 function toBlob(base64) { 13 var bin = atob(base64.replace(/^.*,/, '')); 14 var buffer = new Uint8Array(bin.length); 15 for (var i = 0; i < bin.length; i++) { 16 buffer[i] = bin.charCodeAt(i); 17 } 18 // Blobを作成 19 try{ 20 var blob = new Blob([buffer.buffer], { 21 type: 'image/png' 22 }); 23 }catch (e){ 24 return false; 25 } 26 return blob; 27 } 28 29 function snapPicture () { 30 navigator.camera.getPicture (onSuccess, onFail, 31 { quality: 50, destinationType: Camera.DestinationType.DATA_URL}); 32 33 //成功した際に呼ばれるコールバック関数 34 function onSuccess (imageData) { 35 var byteCharacters = toBlob(imageData); 36 var NCMBFile = new NCMB.File(fileName, byteCharacters, "image/png"); 37 NCMBFile.save().then(function() { 38 39 window.alert ('Upload is success!'); 40 }); 41 } 42 43 //失敗した場合に呼ばれるコールバック関数 44 function onFail (message) { 45 alert ('エラーです: ' + message); 46 } 47 } 48 49 50 function dwlPicture (imageData) { 51 //NCMBサーバーからファイルをダウンロード 52 var getFile = new NCMB.File(fileName); 53 var image_canvas = document.getElementById("showImage"); 54 getFile.fetchImgSource(image_canvas); 55 } 56 57 </script> 58 </head> 59<body> 60 <h2>NiftyCloud mobile backend!</h2> 61 <div><a class="button--large" onclick="snapPicture()">Take picture and save</a></div> 62 <div><a class="button--large" onclick="dwlPicture()">Download by NCMB</a></div> 63 <img id="showImage" width="280" height="350"/> 64</body>
以上、よろしくお願いいたします。
あなたの回答
tips
プレビュー