программа для чтения файлов phonegap onloadend не работает

Я использую 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);
};

Это работает идеально. Теперь я хочу загрузить изображение в формате, позволяющем отправить его через веб-сокет. Поэтому я использую 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 все равно не запускается. Любые идеи?


cordova html cordova-2.0.0 cordova-3
person marcel    schedule 19.11.2013    source источник
comment
просто чтобы быть уверенным, вы начинаете читать файл только после того, как получите обратный вызов onSuccess от getPicture, верно?   -  person benka    schedule 19.11.2013
comment
да, я запускаю читалку нажатием кнопки.. предварительно сфотографировав конечно :)   -  person marcel    schedule 20.11.2013
comment
Может путь неверный? file:///storage/emulated/[...]/123.jpg Я изменил его на file://storage ... но это тоже не сработало ... может быть, что-то еще не так с ним   -  person marcel    schedule 20.11.2013
comment
вы должны поместить вторую часть вашего кода в метод onSuccess   -  person benka    schedule 20.11.2013

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте изменить код следующим образом:

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);
    ...
}
person benka    schedule 20.11.2013
comment
Выглядит здорово, к сожалению, я получаю код ошибки: 5 от window.requestFileSystem... Я проверяю, откуда это может взяться. (Я использую require.js+backbonejs для своего приложения) - person marcel; 20.11.2013
comment
Я использую window.resolveLocalFileSystemURI(document.getElementById('picture').src, gotFileEntry, fail); вместо root.getFile... получается... спасибо за помощь benka :) - person marcel; 20.11.2013

arrow_upward
0
arrow_downward

Использование readAsDataURL может привести к повреждению изображений, особенно в iOS. После нескольких часов тестирования и исследований я могу подтвердить выводы других пользователей об использовании readAsBinaryString(), которые также изменяют обработку кода onloadend.

Справочное сообщение находится по адресу: 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);
person J8lug    schedule 18.07.2016
comment
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится. – Из обзора - person Michael Gaskill; 19.07.2016
comment
Спасибо, @michael-gaskill, я добавил новый пример, объединяющий предложенное редактирование. - person J8lug; 19.07.2016