如何使用Cordova相机正确配置照片文件以匹配html input.files的格式? [英] How do I properly configure photo file to match format of html input.files with Cordova Camera?

问题描述

我有一个现有的Web服务，可以处理用户对照片(以及其他一些数字和文本数据)的输入.通过输入标签捕获照片:

I have an existing web service that handles user input of a photo (as well as some other number and text data). The photo is captured via the input tag:

<input type="file" id="image-input-solo" accept="image/*" capture="capture" />

在javascript中，我通过Files API抓取图像，如下所示:

In the javascript I grab the image via the Files API like so:

$('#image-input-solo').on('change', function() {
    window.__file = this.files[0];
});

// which gives me a File Object like this:
File {
    lastModified: 1507749812264
    lastModifiedDate: Wed Oct 11 2017 12:23:32 GMT-0700 (PDT) {}
    name: "image000987u.jpg"
    size: 441738
    type: "image/jpeg"
    webkitRelativePath: ""
    __proto__: File
}

因此，在我的本机应用程序上下文中(使用Cordova和Camera Plugin)，我成功获取了照片文件:

So in my native app context (using Cordova and the Camera Plugin) I am successfully grabbing the photo file:

//HTML
<div id="button-drink-it-now" ng-click="nativeCamera();">

// JAVASCRIPT
$scope.nativeCamera = function() {
    if (!navigator.camera) {
        alert("Camera API not supported", "Error");
        return;
    }
    var options =   {   quality: 100,
                    destinationType: Camera.DestinationType.FILE_URI,
                    sourceType: 1,          // 0:Photo Library, 1=Camera, 2=Saved Album
                    encodingType: 0      // 0=JPG 1=PNG
                };

    navigator.camera.getPicture(
        function(imgData) {
            var fd = new FormData();
            var reader;
            var imgBlob;
            window.resolveLocalFileSystemURL(imgData, function(fileEntry) {
                fileEntry.file(function(file) {
                    reader = new FileReader();
                        reader.onloadend = function(e) {
                            imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                            fd.append('attachment', imgBlob);
                            window.__file = imgBlob; // MY ATTEMPT TO GET THE IMAGE IN THE CORRECT WAY
                        };
                        reader.readAsArrayBuffer(file);
                 }, function(e){
                    console.log('error with photo file');
                 });
            }, function(e){
                console.log('error with photo file');
            });
        },
        function() {
            alert('Error taking picture', 'Error');
        },
        options);
};

// THE OBJECT I GET FORM THE imgBlob:
Blob {
    size: 6268043
    type: "image/jpeg"
}

我的问题是，如何从本地相机获取照片文件并将其格式化为与从HTML输入获得的文件对象相同的文件对象，this.files[0]，以便我可以继续使用现有的Web服务来存储照片?

My question is, how can I get the photo file from the native camera and format it into the same File Object as I get from the HTML input, this.files[0] so I can continue using my existing web service to store the photo?

推荐答案

原来是一个简单的解决方法:

Turns out it was a simple fix:

navigator.camera.getPicture(
    function(imgData) {
        var fd = new FormData();
        var reader;
        var imgBlob;
        window.resolveLocalFileSystemURL(imgData, function(fileEntry) {
            fileEntry.file(function(file) {
                reader = new FileReader();
                    reader.onloadend = function(e) {
                        imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                        window.__file = imgBlob; // PLACE THE FILE ASSIGNMENT HERE AFTER THE READER HAS INGESTED THE FILE BYTES
                    };
                    reader.readAsArrayBuffer(file);
                    // window.__file = imgBlob; // FILE ASSIGNMENT USED TO BE HERE
             }, function(e){
                console.log('error with photo file');
             });
        }, function(e){
            console.log('error with photo file');
        });
    },
    function() {
        alert('Error taking picture', 'Error');
    },
    options);
};

这篇关于如何使用Cordova相机正确配置照片文件以匹配html input.files的格式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！