【问题标题】:How can I store my captured picture on my server如何将捕获的图片存储在我的服务器上
【发布时间】:2014-03-26 08:42:03
【问题描述】:

我正在使用 Phonegap 创建一个专门用于 Android、Ios 和 Windows 手机的应用程序。有了这个,我正在使用相机 API 来捕捉你手机上的图片。这些当前未存储,将在重新打开时删除。因此,我想访问我的服务器来存储图片(例如 .jpeg 格式)。这通过 JavaScript / HTML。如何创建并存储此文件?

var 图片来源; // 图片来源 变量目的地类型; // 设置返回值的格式

// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);

// device APIs are available
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

// Called when a photo is successfully retrieved
//
function onPhotoDataSuccess(imageData) {
  // Uncomment to view the base64-encoded image data
  // console.log(imageData);

  // Get image handle
  //
  var smallImage = document.getElementById('smallImage');

  // Unhide image elements
  //
  smallImage.style.display = 'block';

  // Show the captured photo
  // The in-line CSS rules are used to resize the image
  //
  smallImage.src = "data:image/jpeg;base64," + imageData;
}

// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
  // Uncomment to view the image file URI
  // console.log(imageURI);

  // Get image handle
  //
  var largeImage = document.getElementById('largeImage');

  // Unhide image elements
  //
  largeImage.style.display = 'block';

  // Show the captured photo
  // The in-line CSS rules are used to resize the image
  //
  largeImage.src = imageURI;
}

// A button will call this function
//
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 capturePhotoEdit() {
  // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
    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 });
}

// Called if something bad happens.
//
function onFail(message) {
  alert('Failed because: ' + message);
}

【问题讨论】:

    标签: javascript android ios cordova


    【解决方案1】:

    您可以获取 FILE_URI,然后使用 php 将其上传到您的服务器,如下所示:

    电话号码:

    function uploadPhoto(imageURI) {
                var options = new FileUploadOptions();
                options.fileKey="file";
                options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
                options.mimeType="image/jpeg";
    
                var params = new Object();
                params.value1 = "test";
                params.value2 = "param";
    
                options.params = params;
                options.chunkedMode = false;
    
                var ft = new FileTransfer();
                ft.upload(imageURI, "http://yourdomain.com/upload.php", win, fail, options);
            }
    
            navigator.camera.getPicture(uploadPhoto, function(message) {
           alert('get picture failed');
        },{
                quality: 50, 
                destinationType: navigator.camera.DestinationType.FILE_URI,
                sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
            }
                );
    

    PHP 代码(upload.php):

    <?php
    print_r($_FILES);
    $new_image_name = "namethisimage.jpg";
    move_uploaded_file($_FILES["file"]["tmp_name"], "/srv/www/upload/".$new_image_name);
    ?>
    

    【讨论】:

    • 虽然这可行,但我不确定我是否会推荐它。文档建议您将文件用于相机结果,而不是 base64 字符串,因为这些字符串可能巨大并且对内存有影响。如果您使用文件,则可以使用 FileTransfer API 轻松执行相同的 POST。
    • 我怎样才能将这张图片放在一个文件中以使用 FileTransfer API 发布它?
    • @RaymondCamden 你是对的,我更新了我的答案以使用 FILE_URI
    • 它目前对我来说无法正常工作。它似乎没有将图片发送到服务器。你能给我更多关于发送/接收的信息吗?也许我可以在哪里找到有助于解决这个问题的错误?
    • @patrick:你能从你的服务器和 phonegap 应用程序中添加一些日志来理解这个问题吗?
    猜你喜欢
    • 2011-06-26
    • 1970-01-01
    • 2018-09-14
    • 2017-12-25
    • 2015-01-09
    • 2013-03-17
    • 2012-03-10
    • 2015-11-07
    • 1970-01-01
    相关资源
    最近更新 更多