Cordova/phonegap: 拍照并发送到我的服务器
Cordova/phonegap: Take a photo and send it to my server
目前,在我的应用程序中,我有一个屏幕,用户可以在其中单击 "send" 并将一些数据发送到服务器(一个 wcf 服务)。
现在,我想添加一个功能:除了实际发送的数据外,用户还需要拍照并发送,其他参数。
我已经添加了插件(相机)并创建了模板。
function capturePhoto() {
alert("1");
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
//destinationType: navigator.camera.DestinationType.NATIVE_URI,
//sourceType: sourceType.CAMERA
});
}
function onPhotoDataSuccess(imageData) {
alert("S");
var smallImage = document.getElementById('myImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
image = "data:image/jpeg;base64," + imageData;
alert("Image = " + image);
}
function onFail(message) {
alert('Failed because: ' + message);
}
我确定我必须在 onSuccess 函数中管理一些东西,但我怎样才能达到我的目标?拍照后,我必须在这里添加图片作为参数发送它:
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: url,
data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere }),
success: function (output) {
//my stuff
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//my error stuff
}
});
我的 deviceReady 函数是:
$(document).on("deviceready", function () {
navigator.splashscreen.hide();
});
我认为在服务器端 "pictureHere" 参数必须是一个字节[],但我不知道如何管理应用程序端。
更新:我的 config.xml
<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
<name>ApplicationTemplate</name>
<description>Template</description>
<author email="info@info.com" href="http://www.info.com/">info</author>
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
<!--<preference name="phonegap-version" value="cli-7.0.1" />-->
<!--<preference name="SplashScreen" value="splash" />-->
<preference name="SplashScreenDelay" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<!--<plugin name="cordova-plugin-file" />-->
<!--<plugin name="cordova-plugin-camera" />-->
<plugin name="cordova-plugin-camera" spec="^2.4.1">
<variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
</plugin>
<plugin name="cordova-plugin-splashscreen" onload="true" />
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-ios-longpress-fix" />
<plugin name="cordova-plugin-statusbar" onload="true" />
<access origin="*" />
</widget>
在我的 html 页面中我添加了
<img id="myImage" />
function getImage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(function(pictureHere){
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: url,
data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere}),
success: function (output) {
//my stuff
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//my error stuff
}
});
}, function (message) {
Alert("Error", "error");
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
这里的图片必须是base64字符串
目前,在我的应用程序中,我有一个屏幕,用户可以在其中单击 "send" 并将一些数据发送到服务器(一个 wcf 服务)。
现在,我想添加一个功能:除了实际发送的数据外,用户还需要拍照并发送,其他参数。
我已经添加了插件(相机)并创建了模板。
function capturePhoto() {
alert("1");
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
//destinationType: navigator.camera.DestinationType.NATIVE_URI,
//sourceType: sourceType.CAMERA
});
}
function onPhotoDataSuccess(imageData) {
alert("S");
var smallImage = document.getElementById('myImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
image = "data:image/jpeg;base64," + imageData;
alert("Image = " + image);
}
function onFail(message) {
alert('Failed because: ' + message);
}
我确定我必须在 onSuccess 函数中管理一些东西,但我怎样才能达到我的目标?拍照后,我必须在这里添加图片作为参数发送它:
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: url,
data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere }),
success: function (output) {
//my stuff
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//my error stuff
}
});
我的 deviceReady 函数是:
$(document).on("deviceready", function () {
navigator.splashscreen.hide();
});
我认为在服务器端 "pictureHere" 参数必须是一个字节[],但我不知道如何管理应用程序端。
更新:我的 config.xml
<widget id="com.devexpress.apptemplate" version="1.0" versionCode="1">
<name>ApplicationTemplate</name>
<description>Template</description>
<author email="info@info.com" href="http://www.info.com/">info</author>
<preference name="permissions" value="none" />
<preference name="prerendered-icon" value="true" />
<preference name="android-windowSoftInputMode" value="adjustPan" />
<!--<preference name="phonegap-version" value="cli-7.0.1" />-->
<!--<preference name="SplashScreen" value="splash" />-->
<preference name="SplashScreenDelay" value="60000" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="DisallowOverscroll" value="true" />
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="22" />
<!--<plugin name="cordova-plugin-file" />-->
<!--<plugin name="cordova-plugin-camera" />-->
<plugin name="cordova-plugin-camera" spec="^2.4.1">
<variable name="CAMERA_USAGE_DESCRIPTION" value=" " />
<variable name="PHOTOLIBRARY_USAGE_DESCRIPTION" value=" " />
</plugin>
<plugin name="cordova-plugin-splashscreen" onload="true" />
<plugin name="cordova-plugin-whitelist" />
<plugin name="cordova-plugin-ios-longpress-fix" />
<plugin name="cordova-plugin-statusbar" onload="true" />
<access origin="*" />
</widget>
在我的 html 页面中我添加了
<img id="myImage" />
function getImage() {
// Retrieve image file location from specified source
navigator.camera.getPicture(function(pictureHere){
$.ajax({
type: "POST",
contentType: "application/json",
dataType: "json",
url: url,
data: JSON.stringify({ "data": date_str, "PICTUREHERE":pictureHere}),
success: function (output) {
//my stuff
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
//my error stuff
}
});
}, function (message) {
Alert("Error", "error");
}, {
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
这里的图片必须是base64字符串