PhoneGap Filereader onloadend 不起作用

Question

我正在使用phonegap拍摄一张照片，并将其放入img容器中。

navigator.camera.getPicture(onSuccess, onFail);
var onSuccess =  function(imageURI) {
        var pic = document.getElementById('picture');
        pic.style.display = 'block';
        pic.src = imageURI;
};
var onFail = function(message) {
        $('#infoField').val(message);
};

这很完美。现在我想加载一个格式为alble的图片，通过websocket发送。因此，我使用fileReader并将类型设置为dataUrl。

var reader = new FileReader();
reader.onloadend = function(evt) {
      $('textarea#textarea1').val("evt triggered");
      //var socket = io.connect(addr);
      //socket.emit('mobilePicture', "works");
};
reader.readAsDataURL(document.getElementById('picture').src);

不幸的是什么都没发生。无论如何都不会触发onloadend事件。有什么想法吗？

Answer 1

试着这样重新排列代码：

var onSuccess =  function(imageURI) {
        var pic = document.getElementById('picture');
        pic.style.display = 'block';
        pic.src = imageURI;
        var reader = new FileReader();
        reader.onloadend = function(evt) {
              $('textarea#textarea1').val("evt triggered");
              //var socket = io.connect(addr);
              //socket.emit('mobilePicture', "works");
        };
        reader.readAsDataURL(imageURI);
};
var onFail = function(message) {
        $('#infoField').val(message);
};
navigator.camera.getPicture(onSuccess, onFail);

您必须将file object传递给file.reader，而不仅仅是文件的路径。

编辑/更新：
要首先通过路径在文件系统上查找文件，您需要使用fileSystem:创建一个fileEntry

示例

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
function gotFS(fileSystem) {
    fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
    //fileEntry
    alert("Got the fileEntry!");
    reader.readAsDataURL(fileEntry);
    ...
}

Answer 2

使用readAsDataURL仍然可能导致图像损坏，尤其是在iOS中。经过数小时的测试和研究，我可以确认另一个用户关于使用readAsBinaryString（）的发现，这也改变了对加载端代码的处理。

参考职位：Cordova-读取大图像会损坏图像

要扩展@benka示例并包含命令iOS对代码感到满意，代码可能看起来像：

var onSuccess =  function(imageURI) {
var pic = document.getElementById('picture');
pic.style.display = 'block';
pic.src = imageURI;
var reader = new FileReader();
reader.onloadend = function(evt) {
  $('textarea#textarea1').val("evt triggered");
  //var socket = io.connect(addr);
  //socket.emit('mobilePicture', "works");
  var base64 = window.btoa(evt.target.result); // Send this to a server.
  var image.src = "data:image/jpeg;base64," + base64 ; // Use if you need a html src reference.
};
  reader.readAsBinaryString(imageURI);
};
var onFail = function(message) {
  $('#infoField').val(message);
};
navigator.camera.getPicture(onSuccess, onFail);