Q&A
いつもお世話になっております。
現在、Monacaを使ってaframeでパノラマ写真を表示する簡単なサンプルプログラムを作っています。しかし、画像が表示されずに行き詰っています。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Capture Photo</title> 5<!-- 6 <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script> 7--> 8 <script type="text/javascript" src="components/loader.js"></script> 9 <script type="text/javascript" charset="utf-8"> 10 var pictureSource; // picture source 11 var destinationType; // sets the format of returned value 12 13 // Wait for Cordova to connect with the device 14 // 15 document.addEventListener("deviceready",onDeviceReady,false); 16 17 // Cordova is ready to be used! 18 // 19 function onDeviceReady() { 20 pictureSource=navigator.camera.PictureSourceType; 21 destinationType=navigator.camera.DestinationType; 22 } 23 24 // Called when a photo is successfully retrieved 25 // 26 function onPhotoDataSuccess(imageData) { 27 // Uncomment to view the base64 encoded image data 28 // console.log(imageData); 29 30 // Get image handle 31 // 32 var smallImage = document.getElementById('smallImage'); 33 34 // Unhide image elements 35 // 36 smallImage.style.display = 'block'; 37 38 // Show the captured photo 39 // The inline CSS rules are used to resize the image 40 // 41 smallImage.src = "data:image/jpeg;base64," + imageData; 42 } 43 44 // Called when a photo is successfully retrieved 45 // 46 function onPhotoURISuccess(imageURI) { 47 // Uncomment to view the image file URI 48 console.log(imageURI) 49 50 // Get image handle 51 // 52 var largeImage = document.getElementById('largeImage'); 53 54 // Unhide image elements 55 // 56 largeImage.style.display = 'block'; 57 58 // Show the captured photo 59 // The inline CSS rules are used to resize the image 60 // 61 largeImage.src = imageURI; 62 } 63 64 // A button will call this function 65 // 66 function capturePhoto() { 67 // Take picture using device camera and retrieve image as base64-encoded string 68 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, 69 destinationType: destinationType.DATA_URL }); 70 } 71 72 // A button will call this function 73 // 74 function capturePhotoEdit() { 75 // Take picture using device camera, allow edit, and retrieve image as base64-encoded string 76 navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, 77 destinationType: destinationType.DATA_URL }); 78 } 79 80 // A button will call this function 81 // 82 function getPhoto(source) { 83 // Retrieve image file location from specified source 84 navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 85 destinationType: destinationType.FILE_URI, 86 sourceType: source }); 87 } 88 89 // Called if something bad happens. 90 // 91 function onFail(message) { 92 alert('Failed because: ' + message); 93 } 94 95 </script> 96 </head> 97 <body> 98<!-- 99 <button onclick="capturePhoto();">Capture Photo</button> <br> 100 <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> 101 <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> 102--> 103 <br /><br /><br /> 104 <button id="btn" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM)">From Photo Album</button><br> 105<!-- 106 <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> 107--> 108<!-- 109 <img style="display:none;" id="largeImage" src="" /> 110--> 111 <a-scene> 112 <a-camera position="0 0 0"></a-camera> 113 <a-sky id="largeImage" src=""></a-sky> 114 </a-scene> 115 </body> 116</html>
onPhotoURISuccess関数に書いたconsole.logには正しくファイル名はセットされています。
また、コメントにしてある<a-scene>タグの上にある<img>タグを使うと正しく画像が表示されます。
MonacaのJSコンポーネントの追加でaframe.min.jsはインストールしています。
Monacaでaframeを使う方法について何かご存知の方がいらっしゃいましたらご教示いただけると幸いです。
よろしくお願いします。
回答1件
0
ググったらこの一文が必要みたいですが大丈夫でしょうか
html
1<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
投稿2016/10/25 13:31
総合スコア2724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/10/25 20:12
2016/10/26 02:29