问题
I'm using phonegap to take a picture and put it into a img-container.
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);
};
That works perfect. Now I want to load the picture with a format to be alble to send it over a websocket. Therefor I use the fileReader and set the type to 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);
Unfortunately nothing happens. The onloadend event isn't triggered anyhow. Any ideas?
回答1:
Try to re-arrange your code like this:
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);
You have to pass a file object
to the file.reader
not just a path to the file.
Edit / update:
To find a file on your filesystem by a path first you will need to create a fileEntry
using the fileSystem
:
Example
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);
...
}
回答2:
Using readAsDataURL may still result in corrupt images particularly with iOS. After hours of testing and research I can confirm another users findings on using readAsBinaryString() which changes handling the onloadend code too.
Reference post is at: Cordova - Reading Large Image corrupts image
To expand on @benka example and incorporate the command iOS is happy with the code might look like:
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);
来源:https://stackoverflow.com/questions/20073302/phonegap-filereader-onloadend-doesnt-work