Phonegap 相机插件无法在 iOS 中使用
Phonegap camera plugin not working in iOS
我正在使用 Phonegap v6 构建一个应用程序,我正在使用 cordova 相机插件将图片上传到服务器,我已经正确设置了所有内容。
当我在 Phonegap Developer iOS App 中测试它时,它工作正常,我可以选择图像并上传它。
但是当我编译 IPA 文件并将它安装到我的 iPhone 上时,当我点击 select 图片按钮时,没有任何反应,但是当我点击它并按任意表单输入时,图库将打开,我可以选择一张图片,但图片不会上传。完全没有反馈。
它再次适用于 Phonegap Mobile 应用程序,但不适用于独立的 IPA。
这是 JS 函数:
// take picture from camera
$('#but_take').click(function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
destinationType: Camera.DestinationType.FILE_URL
});
});
// upload select
$("#but_select").click(function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
destinationType: Camera.DestinationType.FILE_URI
});
});
// Change image source and upload photo to server
function onSuccess(imageURI) {
// Set image source
var image = document.getElementById('img');
image.src = imageURI + '?' + Math.random();
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var params = {};
params.value1 = localStorage.phone;
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI,
"hiddenUrlHere", function(result){
myApp.alert(result.response, "Profile Updated");
}, function(error){
myApp.alert(JSON.stringify(error), "Error");
}, options);
}
function onFail(message) {
myApp.alert(message, "Error");
}
HTML 片段:
<img src="img/cam2.jpg" id='img' style="width: 100px; height:
100px;">
<button id='but_select'>Select photo from Gallery</button>
config.xml 文件:
<?xml version='1.0' encoding='utf-8'?>
<widget id="appIDhere" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>AppName</name>
<description>
Senior Project By name
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
name here
</author>
<content src="index.html" />
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<preference name="android-minSdkVersion" value="14" />
<allow-intent href="market:*" />
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
</feature>
</platform>
<platform name="ios">
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="BackupWebStorage" value="none" />
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to upload pictures for posts</string>
</edit-config>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<feature name="Keyboard">
<param name="ios-package" onload="true" value="CDVKeyboard" />
</feature>
</platform>
<preference name="DisallowOverscroll" value="true" />
<plugin name="cordova-plugin-console" spec="~1.0.1" />
<plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
<plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
<param name="SENDER_ID" value="981753167590" />
</plugin>
<plugin name="cordova-plugin-camera" spec="https://github.com/apache/cordova-plugin-camera" />
<plugin name="cordova-plugin-keyboard" spec="https://github.com/cjpearson/cordova-plugin-keyboard" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
</widget>
内容安全元标记:
<meta http-equiv="Content-Security-Policy" content="default-src *;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
同样,所有插件都已安装并正确链接,在 Phonegap iOS 应用程序中一切正常,但在独立的 IPA 中则不然。
有什么我遗漏的吗?
也许是一些配置,而不是 Javascript 编码,也许是权限..
顺便说一下,Android APK 也在做同样的事情。
对于相机问题,您必须将 gap:
添加到 Content-Security-Policy
元标记的 default-src
。
示例:
<meta http-equiv="Content-Security-Policy" content="default-src * gap:;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
对于上传问题,您必须安装 cordova-plugin-file-transfer。
它在 Phonegap 开发者应用程序上有效,因为它包含所有插件,并且在其 Content-Security-Policy
元标记上也有 gap:
。
如果您想查看错误,可以在您的设备中启用远程调试,这将允许检查应用程序并在您的桌面 Safari 上查看错误。
我正在使用 Phonegap v6 构建一个应用程序,我正在使用 cordova 相机插件将图片上传到服务器,我已经正确设置了所有内容。
当我在 Phonegap Developer iOS App 中测试它时,它工作正常,我可以选择图像并上传它。
但是当我编译 IPA 文件并将它安装到我的 iPhone 上时,当我点击 select 图片按钮时,没有任何反应,但是当我点击它并按任意表单输入时,图库将打开,我可以选择一张图片,但图片不会上传。完全没有反馈。
它再次适用于 Phonegap Mobile 应用程序,但不适用于独立的 IPA。
这是 JS 函数:
// take picture from camera
$('#but_take').click(function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 20,
destinationType: Camera.DestinationType.FILE_URL
});
});
// upload select
$("#but_select").click(function(){
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
allowEdit: true,
destinationType: Camera.DestinationType.FILE_URI
});
});
// Change image source and upload photo to server
function onSuccess(imageURI) {
// Set image source
var image = document.getElementById('img');
image.src = imageURI + '?' + Math.random();
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";
var params = {};
params.value1 = localStorage.phone;
params.value2 = "param";
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI,
"hiddenUrlHere", function(result){
myApp.alert(result.response, "Profile Updated");
}, function(error){
myApp.alert(JSON.stringify(error), "Error");
}, options);
}
function onFail(message) {
myApp.alert(message, "Error");
}
HTML 片段:
<img src="img/cam2.jpg" id='img' style="width: 100px; height:
100px;">
<button id='but_select'>Select photo from Gallery</button>
config.xml 文件:
<?xml version='1.0' encoding='utf-8'?>
<widget id="appIDhere" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>AppName</name>
<description>
Senior Project By name
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
name here
</author>
<content src="index.html" />
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<preference name="android-minSdkVersion" value="14" />
<allow-intent href="market:*" />
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher"/>
</feature>
</platform>
<platform name="ios">
<access origin="*" />
<access origin="content:///*" />
<allow-navigation href="*" />
<allow-intent href="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="BackupWebStorage" value="none" />
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need to photo library access to upload pictures for posts</string>
</edit-config>
<feature name="StatusBar">
<param name="ios-package" onload="true" value="CDVStatusBar" />
</feature>
<feature name="Camera">
<param name="ios-package" value="CDVCamera" />
</feature>
<feature name="Keyboard">
<param name="ios-package" onload="true" value="CDVKeyboard" />
</feature>
</platform>
<preference name="DisallowOverscroll" value="true" />
<plugin name="cordova-plugin-console" spec="~1.0.1" />
<plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
<plugin name="phonegap-plugin-push" source="npm" spec="~1.8.0">
<param name="SENDER_ID" value="981753167590" />
</plugin>
<plugin name="cordova-plugin-camera" spec="https://github.com/apache/cordova-plugin-camera" />
<plugin name="cordova-plugin-keyboard" spec="https://github.com/cjpearson/cordova-plugin-keyboard" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
</widget>
内容安全元标记:
<meta http-equiv="Content-Security-Policy" content="default-src *;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
同样,所有插件都已安装并正确链接,在 Phonegap iOS 应用程序中一切正常,但在独立的 IPA 中则不然。
有什么我遗漏的吗? 也许是一些配置,而不是 Javascript 编码,也许是权限..
顺便说一下,Android APK 也在做同样的事情。
对于相机问题,您必须将 gap:
添加到 Content-Security-Policy
元标记的 default-src
。
示例:
<meta http-equiv="Content-Security-Policy" content="default-src * gap:;font-src 'self' data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; media-src *; img-src * filesystem: data:">
对于上传问题,您必须安装 cordova-plugin-file-transfer。
它在 Phonegap 开发者应用程序上有效,因为它包含所有插件,并且在其 Content-Security-Policy
元标记上也有 gap:
。
如果您想查看错误,可以在您的设备中启用远程调试,这将允许检查应用程序并在您的桌面 Safari 上查看错误。