使用PhoneGap从imageURI获取Base64

Question

我正在尝试从手机相册中选择的图像中获取base64，但是我无法使其工作：

我尝试了这个：

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
    console.log("0");
    fileSystem.root.getFile(imageURI, null, function(fileEntry) {
        console.log("1");
        fileEntry.file(function(file) {
            console.log("2");
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                console.log("Read complete!");
                image64.value = Base64.encode(evt.target.result);
            };
            reader.readAsText(file);
        }, failFile);
    }, failFile);
}, failSystem);

虽然图像显示正常，但我从这个函数中收到一个错误：

fileSystem.root.getFile(imageURI, null, function(fileEntry)

错误信息为：FileError.ENCODING_ERR

我知道这段代码看起来不太美观。但是我不知道如何从imageURI中获取Base64编码。

- SERPRO

---

嗨，这很容易，已经给出了示例，只需参考此链接... 这里。 - Kathir

Answer 1

我在谷歌群组中找到了解决方案。我稍作修改，得到了以下结果：

var gotFileEntry = function(fileEntry) { 
    console.log("got image file entry: " +  fileEntry.fullPath); 
    fileEntry.file( function(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read complete!");
            image64.value = Base64.encode(evt.target.result);
        };
        reader.readAsText(file);
    }, failFile);
};

window.resolveLocalFileSystemURI(imageURI, gotFileEntry, failSystem); 

注意：读取一张普通的5MP像素图像需要约20秒钟，再将其Base64编码需要另外10-15秒钟。

- SERPRO

---

如何获取base64字符串值？我想将base64字符串保存到SQLite中。 如何使用“image64.value”。 - B M

@BM 你可以像这个问题中那样实现：https://dev59.com/wHM_5IYBdhLWcg3w1G6N - SERPRO

Answer 2

上述来自SERPRO的方法可行...但我需要进行更改。

reader.readAsText(file);
to
reader.readAsDataURL(file);

因此，"line"

image64.value = Base64.encode(evt.target.result);

可以将其删除，并直接提取base64结果

image64.value = evt.target.result;

- smanandhar

Answer 3

cordova-plugin-file实现了HTML5文件API，并使用回调API。我更喜欢使用promises，因此我使用$q库重写了该方法：

function getContentAsBase64(fileUrl) {

  //Using $q to change the API so that getContentAsBase64 returns a promise
  var deferred = $q.defer();

  //function to call when either resolve or retrieval fails
  var fail = function (error) {
    errorHandler(error);
    deferred.reject(error);
  }

  //function to call when resolve file succeeded
  //we have a FileEntry - get the file, 
  var fileResolved = function (fileEntry) {
    fileEntry.file(fileSuccess, fail);
  }

  //function to call when file successfully retrieved
  //convert to base64 string
  var fileSuccess = function (file) {

    var reader = new FileReader();
    reader.onloadend = function (evt) {
      //promise is resolved with the base64 string
      deferred.resolve(evt.target.result);
    };
    reader.readAsDataURL(file);
  };

  window.resolveLocalFileSystemURL(fileUrl, fileResolved, fail);
  return deferred.promise;
}        

readAsDataURL方法用于读取指定Blob或File的内容。当读取操作完成时，readyState变为DONE，并触发loadend事件。此时，result属性包含数据作为URL，表示文件数据作为base64编码的字符串。

用法：

var imageData;
getContentAsBase64(aq.FileUri).then(function (content) {
   imageData= content;
});

- Colin

---

@JorhelReyes https://docs.angularjs.org/api/ng/service/$q - Colin