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

这很完美。现在我想加载一个格式的图片，以便通过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，而不仅仅是文件的路径。

修改/更新
要先通过路径查找文件系统上的文件，您需要使用fileEntry创建fileSystem：

示例

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（）的发现，这也改变了对onloadend代码的处理。

参考文章位于： Cordova - Reading Large Image corrupts image

要扩展@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);

phonegap文件阅读器onloadend不起作用

2 个答案: