如何使用 Cordova 获取图像对象？答案

【问题标题】：How to get Image Object using Cordova?如何使用 Cordova 获取图像对象？
【发布时间】：2014-10-02 05:14:13
【问题描述】：

当使用 getPicture 时，我们得到一个相对 URL 或 base64image。但我想将图像对象发送到 Amazon S3。无论如何要这样做？

这是我获取 base64image 的方式

// 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, {
        destinationType: Camera.DestinationType.DATA_URL, 
        quality: 50
    });
}

[更新] 现在我需要将图像作为对象转换为字节数组并使用 REST (PUT) 调用将其上传到 Amazon S3。

【问题讨论】：

标签： cordova image-capture

【解决方案1】：

当然可以

相机/图像源代码

html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta content="telephone=no" name="format-detection">
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta content=
    "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
    name="viewport">
    <script src="cordova.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <title>Camera Cordova Plugin</title>
</head>

<body>
    <button onclick="capturePhoto();">Capture Photo</button><br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
    Library</button><br>
    <img id="image" src="" style="display:none;width:100%;">
</body>
</html>

function onPhotoDataSuccess(imageURI) {
    // Uncomment to view the base64-encoded image data
    console.log(imageURI);
    // Get image handle
    //
    var cameraImage = document.getElementById('image');
    // Unhide image elements
    //
    cameraImage.style.display = 'block';
    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    cameraImage.src = imageURI;
}

function capturePhoto() {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality: 30,
        targetWidth: 600,
        targetHeight: 600,
        destinationType: destinationType.FILE_URI,
        saveToPhotoAlbum: true
    });
}

文件传输源码

function upload() {
    var img = document.getElementById('image');
    var imageURI = img.src;
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";
    var params = new Object();
    options.params = params;
    options.chunkedMode = false;
    var ft = new FileTransfer();
    ft.upload(imageURI, "https://www.example.com/upload.php", win, fail,
        options);
}

function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

php

<?php
move_uploaded_file($_FILES["file"]["tmp_name"], '/path/to/file');

参考资料：

http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/ http://blog.revivalx.com/2014/07/12/upload-image-using-file-transfer-cordova-plugin-for-ios-and-android/

【讨论】：

非常感谢。我会试试看:-)
我试过这个，但我发现要求是获取图像对象并将其转换为字节数组，然后作为 REST 调用 (PUT) 上传。感谢您的帮助，我将代码更改为具有 URL 并将图像存储在图库中。现在我需要以某种方式将其转换为 Object 并调用 REST 服务。
我已经浏览了代码，在获取图像 url 后，我正在创建一个 Image 对象并设置 src。现在我需要将其转换为字节数组，因为上传 REST 调用期望图像位于字节数组中。所以这就是我现在所困的地方。关于字节数组转换的任何想法？非常感谢所有的帮助。
你可以使用base64上传到你的数据库

【解决方案2】：

同样你也可以将 byteStream 加载到图片标签中

      function(success) { // Assuming you are sending the bytestream from the code

         var img  = document.getElementById('image');
         img.src = 'data:image/png;base64,' + success.bytestream;
       }

【讨论】：