科尔多瓦 - 读大图像腐蚀图像 [英] Cordova - Reading Large Image corrupts image

问题描述

我正在使用图片选择器（

上传的（损坏的）图片。注意，其中一些是读/上传正常：

解决方案

我在寻找类似问题的解决方案时发现了您的问题。来自相机的大图像的DataURL将用作图像的源，但是当我使用fileReader.readAsDataURL时，同一图像被损坏。

我已经能够通过使用fileReader.readAsBinaryData而不是fileReader.readAsDataURL，然后将binarystring转换为一个dataURL来绕过问题。

  window.resolveLocalFileSystemURL （imageUri，function done（fileEntry）{
 fileEntry.file（function（fileObj）{
 var image = new Image（）; 
 var reader = new FileReader（）; 
 reader.onloadend = function（e）{
 image.src =data：image / jpeg; base64，+ window.btoa（e.target.result）
} 
 reader.readAsBinaryString （fileObj）; 
} 
} 
  

希望这可以帮助您找到您自己的解决方法。

I am using the image-picker (cordova-imagePicker) plugin in order to get images from gallery and upload them to a server.

I am using Cordova 6.1.1 with Android platform 5.1.1 and the following plugins:

cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-imagepicker 1.1.0 "ImagePicker"
cordova-plugin-inappbrowser 1.4.0 "InAppBrowser"
cordova-plugin-media 2.3.0 "Media"

As callback to the plugin, I am converting the path I get to a File using the following code. Note that I use resolveFile because this code is running also in desktop in which case, the entry is already a File object.

var resolveFile = function(entry) {
    if (typeof(entry) === "string") {
        var deferred = $q.defer();
        // first convert to local file system URL
        window.resolveLocalFileSystemURL(entry, function(fileEntry) {
            // now read/convert the file to file object.
            fileEntry.file(function(file) {
                console.log("File converted to file entry");
                deferred.resolve(file);
            }, function(err) {
                console.log("Failed to convert to file entry", err);
                deferred.reject(err);
            });
        }, function(err) {
            console.log("Failed to resolve to file URL", err);
            deferred.reject(err);
        });

        return deferred.promise;
    } else {
        return $q.when(entry);
    }
};

This, in turn is used to read the image and pass it to a function that uploads it to the server ($files is what I am getting from plugin or from input in case of desktop/browser):

var upload = function () {
    if (!$files[currentFile]) {
        onAllFinished();
        return;
    }
    file = $files[currentFile];
    beforeLoad(file);
    fileReader = new FileReader();
    fileReader.onload = onload;
    fileReader.onprogress = progress;
    resolveFile(file).then(function(actualFile) {
        fileReader.readAsDataURL(actualFile);
    });
    currentFile++;
};

In the above, onload cuts the image data (following 'base64,' in string) and sends it to the the upload code which expects a base64 string and uploads the data to the server using simple AJAX call:

var uploadPhoto = function(url, photo, callback, error)
    $http.post(url, {
        photo: photo,
    })
    .success(callback)
    .error(function (data, status, headers, config) {
        if (error)
            error(data, status, headers, config);
    });

The last function works also with the camera plugin camera plugin using DATA_URI target (I know, it's not recommended) which also return a base64 string (so I can reuse the code).

It seems to me there's something wrong going on with the file reader output (I am guessing). What (I think) hints to that is that small images (10s kb) are loaded fine as well as already prepared base64 string from camera plugin but larger images (few MBs) that goes through the filereader (on Android, on desktop it is fine) are uploaded corrupted (see below).

Has anyone run into such issues? Can anyone suggest a fix (other than changing the code to use FileTransfer plugin)?

The original image:

The uploaded (corrupted) image. Note, some of it is read/uploaded fine:

解决方案

I found your question while searching for a solution for a similar problem. DataURL's of large images from camera would show up when used as the source of an image but the same image got corrupted when I use fileReader.readAsDataURL.

I've been able to bypass the problem by using fileReader.readAsBinaryData instead of fileReader.readAsDataURL and then turning the binarystring into a dataURL.

window.resolveLocalFileSystemURL(imageUri, function done(fileEntry) {
    fileEntry.file(function (fileObj) {
        var image = new Image();
        var reader = new FileReader();
        reader.onloadend = function (e) {
            image.src = "data:image/jpeg;base64," + window.btoa(e.target.result)
        }
        reader.readAsBinaryString(fileObj);
    }
} 

Hopefully this helps you to find a workaround of your own.

这篇关于科尔多瓦 - 读大图像腐蚀图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！