ios Cordova 1.7.0 抓拍上传照片示例

Posted

技术标签:

【中文标题】ios Cordova 1.7.0 抓拍上传照片示例【英文标题】:ios Cordova 1.7.0 Capture and upload a photo example 【发布时间】:2012-05-17 03:34:50 【问题描述】:

我正在尝试将照片连接到服务器以上传到服务器。没有cordova 1.7.0 示例。只是尝试一下,但它不起作用。我的错误是.. wait_fences: failed to receive reply: 10004003.

function capturePhoto() 
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail,  quality: 50,
    destinationType: destinationType.DATA_URL );



// A button will call this function
//
function getPhoto(source) 
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail,  quality: 50, 
    destinationType: destinationType.FILE_URI,
    sourceType: source );



 function onSuccess(imageData)  
 var image = document.getElementById('myImage');
 image.src = "data:image/jpeg;base64," + imageData;
 $.post('http://site.com/api/upload.php', data:imageData);
 

<?php 

if ($_REQUEST['image']) 

// convert the image data from base64
$imgData = base64_decode($_REQUEST['image']);

// set the image paths
$file = '/api/' . md5(date('Ymdgisu')) . '.jpg';
$url = 'http://www.site.com' . $file; 

// delete the image if it already exists
if (file_exists($file))  unlink($file); 

// write the imgData to the file
$fp = fopen($file, 'w');
fwrite($fp, $imgData);
fclose($fp);


?>

【问题讨论】:

【参考方案1】:
try this one if its helpful to you.

$image = $_REQUEST['image'];
$name = date('Ymdgisu') . '.jpg';
base64_decode_image($image, $name);

function base64_decode_image($image, $name)
    if ($image)
        $new_file = fopen("/api/" . $name, "x");
        fwrite($new_file, base64_decode($image));
        fclose($new_file);
        //echo base64_decode($image);
    

【讨论】:

我不断收到这个错误.. wait_fences: failed to receive reply: 10004003 我现在遇到白名单错误。阅读有关如何允许访问的信息并进行了操作,但仍在进行中。【参考方案2】:

我认为你可以这样使用。

navigator.camera.getPicture(onSuccess, onFail, quality: 50, destinationType: Camera.DestinationType.DATA_URL );

function onSuccess(imageData) //var image = document.getElementById('myImage');//image.src = "data:image/jpeg;base64," + imageData;$.post('http://www.site.com/api/upload.php', data:imageData);

function onFail(message) alert('Failed because: ' + message);

这里的 onSuccess 函数返回 base64 编码图像字符串,您可以将其传递给 upload.php 文件

【讨论】:

知道如何使用 php 调用图像吗? “调用图像”是什么意思?您是在谈论如何使用 PHP 上传/写入该图像吗? 对不起,我的意思是把它写到服务器上。我更新了上面的源代码。【参考方案3】:

使用 Cordova 的相机和文件传输插件编写了以下代码来上传照片。在 ios 上运行,并假设它在 PhoneGap / Cordova 支持的所有移动浏览器上运行。

Cordova 照片上传示例:cordova file transfer plugin not working in ios simulator


Cordova 的文件传输插件 (https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/index.html) 支持以二进制 (FILE_URI) 或 base64 (DATA_URI) 格式上传。

传统上,文件(如照片)以二进制形式保存到磁盘,然后以 multipart/form-dataapplication/octet-stream 的 MIME 类型上传到服务器。

在 base64 中,您的高分辨率照片会保存到浏览器缓存中,这可能会导致内存溢出,因为浏览器旨在链接到高分辨率图像而不是缓存它们。此外,base64 文件比二进制文件大 37%,所以这也无济于事。

TL;DR;

    安装 Cordova 相机插件和 Cordova 文件传输插件&gt; cordova plugin add cordova-plugin-camera --save;&gt; cordova plugin add cordova-plugin-file-transfer --save;

    将相机选项设置为 FILE_URI

    navigator.camera.getPicture(success, error, 
      destinationType: destinationType.FILE_URI
    );
    

    使用 Cordova 的传输文件插件上传照片

    var request = new FileTransfer();
    var options = new FileTransferOptions();
    request.upload(fileUri, success, error, options);
    

【讨论】:

以上是关于ios Cordova 1.7.0 抓拍上传照片示例的主要内容,如果未能解决你的问题,请参考以下文章

cordova for ios: Unable to simultaneously satisfy constraints.

Cordova iOS 的 UIWebView 策略

参考错误:找不到变量:ChildBrowser、Cordova 1.7.0、jQueryMobile 1.0.1、iOS 5.1

拍摄照片后,Ionic cordova 相机插件间歇性崩溃(使用 Firebase 图像上传)

怎么往网页上上传照片

更改 Cordova Geolocation iOS 的显示名称