実現させたいこと
フォトライブラリから画像を選択したときに拡張子を判別してencodingTypeを変更することは可能でしょうか?
.jpgならencodingTypeをCamera.EncodingType.JPEGに変更、.pngならencodingTypeをCamera.EncodingType.JPEGに切り替えできるようにしたいです。
該当のソースコード
javascript
1function button_click(){ 2 //カメラプラグインのオプション 3 var camera_option = { 4 //画質のクオリティ 5 quality : 100, 6 //データURLで取得 7 destinationType : Camera.DestinationType.FILE_URL, 8 //デバイスの画像フォルダを開く 9 sourceType : Camera.PictureSourceType.PHOTOLIBRARY, 10 //静止画像のみ 11 mediaType : 0, 12 } 13 //カメラフォルダを起動 14 navigator.camera.getPicture(photo_library_onsuccess, photo_library_onerror , camera_option); 15 } 16 //カメラプラグイン成功時に呼び出されるコールバック関数 17 function photo_library_onsuccess(data_url){ 18 19 //FILE_URL 20 text.textContent = data_url.slice(88, 999); 21 var url = (cordova.platformId == "ios") ? window.WkWebView.convertFilePath(data_url) : data_url; 22 console.log(url); 23 image.src = url; 24 25 //DATA_URL 26 /* 27 url = "data:image/png;base64," + data_url; 28 text.textContent = url.slice(0, 50); 29 image.src = url; 30 */ 31 } 32 //カメラプラグイン失敗時に呼び出されるコールバック関数 33 function photo_library_onerror(error){ 34 alert(error); 35 } 36
試したこと
encodingTypeを設定せずデフォルトのJPEGになるとしてライブラリからPNG画像を選択し試したところ、FILE_URL、DATA_URL両方ともjpgとして表示されました。成功時のコールバック関数が実行される前に判別する必要があるのでしょうか?
全体のコード
HTML
1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: monaca-app: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <script src="lib/onsenui/js/onsenui.min.js"></script> 9 10 <link rel="stylesheet" href="components/loader.css"> 11 <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> 12 <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> 13 <link rel="stylesheet" href="css/style.css"> 14 15 <script> 16 function button_click(){ 17 //カメラプラグインのオプション 18 var camera_option = { 19 //画質のクオリティ 20 quality : 100, 21 //データURLで取得 22 destinationType : Camera.DestinationType.FILE_URL, 23 //デバイスの画像フォルダを開く 24 sourceType : Camera.PictureSourceType.PHOTOLIBRARY, 25 //静止画像のみ 26 mediaType : 0, 27 } 28 //カメラフォルダを起動 29 navigator.camera.getPicture(photo_library_onsuccess, photo_library_onerror , camera_option); 30 } 31 //カメラプラグイン成功時に呼び出されるコールバック関数 32 function photo_library_onsuccess(data_url){ 33 34 //FILE_URL 35 text.textContent = data_url.slice(88, 999); 36 var url = (cordova.platformId == "ios") ? window.WkWebView.convertFilePath(data_url) : data_url; 37 console.log(url); 38 image.src = url; 39 40 //DATA_URL 41 /* 42 url = "data:image/png;base64," + data_url; 43 text.textContent = url.slice(0, 50); 44 image.src = url; 45 */ 46 } 47 //カメラプラグイン失敗時に呼び出されるコールバック関数 48 function photo_library_onerror(error){ 49 alert(error); 50 } 51 52 if (ons.platform.isIPhoneX()) { 53 document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); 54 document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); 55 } 56 </script> 57</head> 58<body> 59 <ons-navigator id="nav" page="page1.html"></ons-navigator> 60 <template id="page1.html"> 61 <ons-page id="page1"> 62 <button class="button" onclick="button_click();">file url</button> 63 <div><img style="width:90%; margin: 14px; object-fit:contain" id="image"></div> 64 <p id="text"></p> 65 </ons-page> 66 </template> 67</body> 68</html> 69
### 概要
開発環境は Monaca
Cordovaのバージョン:10.0.0
端末: iPhoneX 14.6です
あなたの回答
tips
プレビュー