前提・実現したいこと
Monacaでカメラアプリを作成しています。
org.apache.cordova.cameraプラグインを使用し、<ons-list>のコンポーネントを用いて
それぞれのリストから次の画面(カメラアプリを起動など)したいと考えています。
発生している問題・エラーメッセージ
リストの各項目をタップしても次のイベントが発生しません。
該当のソースコード
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <ons-navigator var="myNavi">画面の切り替え <ons-page id="main-page"> <ons-toolbar> <div class="center">画像変換アプリ</div> </ons-toolbar> <br> <ons-list> <ons-list-item modifier="chevron" class="take-from-gallery"> <ons-icon icon="ion-images"></ons-icon>ギャラリーから選ぶ </ons-list-item> <ons-list-item modifier="chevron" class="take-from-camera"> <ons-icon icon="ion-camera"></ons-icon>カメラで撮影 </ons-list-item> </ons-list> <br> </ons-page> </ons-navigator> <ons-template id="image.html"> <ons-page id="image-page"> <ons-toolbar> <div class="left"> <ons-back-button ons-if-platform="ios">Back</ons-back-button> </div> <div class="center">画像</div> </ons-toolbar> <ons-carousel var="imageCarousel" class="image-carousel" fullscreen auto-scroll overscrollable> </ons-carousel> </ons-page> </ons-template> <script> var images = null; //ギャラリーから画像のパスを取得する var getPictureFromGallery = function(onSuccess){ var options = { quality: 50, sourceType : Camera.PictureSourceType.PHOTOLIBRARY, destinationType: Camera.DestinationType.FILE_URI }; navigator.camera.getPicture(function(imageURI){ onSuccess(imageURI); },onFail,options); }; //写真を撮影して保存する var getPictureFromCamera = function(onSuccess){ var options = { sourceType : Camera.PictureSourceType.CAMERA, saveToPhotoAlbum: true, correctOrientation: true, destinationType: Camera.DestinationType.FILE_URI }; navigator.camera.getPicture(function(imageURI){ onSuccess(imageURI); },onFail, options); }; function onFail(){ console.log("写真を取得できませんでした") } $(document).on('pageinit', '#main-page', function(){ var onSuccess = function(pictureUrl){ images = []; var $img = $('<img>'); $img.attr('src', pictureUrl); images.push({ element: $img, label: '無加工' }); myNavi.pushPage('image.html'); } $(this).on('click', '.take-from-camera', function(){ getPictureFromCamera(onSuccess); }); $(this).on('click', '.take-from-gallery', function(){ getPictureFromGallery(onSuccess); }); }); $(document).on('pageinit', '#image-page',function(){ images.map(function(image){ var element = $('<ons-carousel-item><div class="converted-image-label-wrapper"><div class="converted-image-label"></div></div></ons-carousel-item>'); $(image.element).addClass('converted-image'); element.prepend(image.element); element.find('.converted-image-label').text(image.label); return element[0]; }).forEach(function(element){ $('ons-carousel').append(element); }); setTimeout(function(){ imageCarousel.refresh(); },100); }); </script> </body> </html>
補足情報(FW/ツールのバージョンなど)
jQueryバージョン:2.0.3
フレームワーク:JavaScript
テンプレート:Onsen UI V2 JS Minimum
回答1件
あなたの回答
tips
プレビュー