Come codificare base64 un'immagine in javascript

Question

Sto sviluppando un'applicazione per PhoneGap e utilizzo il metodo navigator.getPicture per ottenere le immagini.

Il modo in cui sto ottenendo il quadro è:

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
destinationType: Camera.DestinationType.FILE_URI }); 

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

Proprio come l'esempio in PhoneGap doc.

Desidero poter utilizzare imageURI e quindi convertirlo in dati immagine per caricarlo successivamente. (Non voglio usare FileTransfer di PhoneGap)

Finora ho provato sia Get image data in JavaScript? e How can you encode a string to Base64 in JavaScript?

Quando provo quanto segue,

function onSuccess(imageURI) { 
    getBase64Image(imageURI); 
} 

function getBase64Image(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    // Get the data-URL formatted image 
    // Firefox supports PNG and JPEG. You could check img.src to 
    // guess the original format, but be aware the using "image/jpg" 
    // will re-encode the image. 
    var dataURL = canvas.toDataURL("image/png"); 

    console.log(dataURL); //here is where I get 'data:,'  

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

e stampare dataURL prima di tornare. Ho appena ricevuto data:, come contenuto.

Qualche idea su cosa sto facendo male?

Answer 1

Bene, puoi provare a prenderlo come DATA_URL. Il tuo chilometraggio può variare in quanto potresti incorrere in un errore di memoria esaurita quando l'immagine viene convertita in una stringa Base64.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.DATA_URL }); 

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

In alternativa è possibile utilizzare lo FileReader.readAsDataURL().

Il metodo canvas.toDataURL non è implementato nelle versioni precedenti di Android.