如何使用Cordova获取Image对象？

Question

如何使用Cordova获取Image对象？

当使用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
    });
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Moh*_*din 5

你当然可以

相机/图像源代码

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>

Run Code Online (Sandbox Code Playgroud)

JS

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
    });
}

Run Code Online (Sandbox Code Playgroud)

文件传输源代码

JS

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);
}

Run Code Online (Sandbox Code Playgroud)

PHP

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

Run Code Online (Sandbox Code Playgroud)

参考文献:

http://blog.revivalx.com/2014/05/03/tutorial-camera-cordova-plugin-for-ios-and-android/ http://blog.revivalx.com/2014/07/12/upload-图像使用文件转印科尔多瓦-插件换IOS和-机器人/

归档时间：	11 年，7 月前
查看次数：	7703 次
最近记录：	11 年，5 月前