Monaca : Onsen UI JS Tabbar を使用しています。
仕様デバイス : iPhone XS
Cameraプラグインを使用し、スマホの写真ライブラリから画像(GIF)を選択した場合、静止画としてHTMLのimgに表示されます。
FILE_URIから確認したところ、JPEGとして表示されました。
GIFとして取得し、アニメーションをループ再生するにはどういったコードを記述すればよろしいでしょうか?
ご回答よろしくお願いします!
HTML
HTML
1 /*省略*/ 2<head> 3<script src="test.js"></script> 4</head> 5<body> 6 <ons-page> 7 <ons-toolbar> 8 <div class="center" id="toolbar-title"></div> 9 </ons-toolbar> 10 <ons-tabbar position="auto"> 11 <ons-tab label="Tab 1" page="tab1.html" active> 12 </ons-tab> 13 <ons-tab label="Tab 2" page="tab2.html"> 14 </ons-tab> 15 </ons-tabbar> 16 </ons-page> 17 18 <ons-template id="tab1.html"> 19 <ons-page id="first-page"> 20 <div style="text-align:center; margin-top: 25px;"> 21 <ons-button onclick="btn()" style="margin: 25px 0;">写真フォルダから選択2</ons-button> 22 <br> 23 <p id="fn">file name</p> 24 25 <img id="photo" style="padding: 20px 10px; width:80%;" /> 26 </div> 27 </ons-page> 28 </ons-template> 29 /*省略*/ 30</body> 31</html> 32
test.js
function btn04(){ //カメラのオプション var option = { quality : 100, destinationType : Camera.DestinationType.FILE_URI, //ファイルURLで取得 sourceType : Camera.PictureSourceType.PHOTOLIBRARY, //画像フォルダを開く saveToPhotoAlbum: false, mediaType: Camera.MediaType.ALLMEDIA }; //カメラフォルダを起動 navigator.camera.getPicture(onSuccess, onError , option); //成功時に呼び出されるコールバック関数 function onSuccess(imageData){ document.getElementById('fn').innerText = imageData; document.getElementById('photo').src = imageData; } //失敗時に呼び出されるコールバック関数 function onError(message){ alert(message); } }
【追記】
・optionパラメータのほうでencdingType : Camera.EncodingType.GIFと記述ましたが変わらずjpegで表示されました。
・AndroidではGIFとして表示される
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/16 09:09