javascriptで画像をbase64でエンコードする方法

Question

私はphonegapアプリケーションを開発し、navigator.getPictureメソッドを使用して画像を取得しています。

私は絵を取得しています方法は次のとおりです。

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

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

ただ、PhoneGapのドキュメントの例のように。

私は、imageURIを使用して後でアップロードするために画像データに変換できるようにしたいと考えています。 （私はPhoneGapのの変数をFileTransferを使用したくない）

私が戻る前に、以下、

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,/, ""); 
} 

そして印刷dataURLをしようとするこれまでのところ私はGet image data in JavaScript?とHow can you encode a string to Base64 in JavaScript?

の両方を試してみました。私はちょうど内容としてdata:,を得る。

私が間違っていることに関するアイデアはありますか？

Answer 1

これはDATA_URLとして取得できます。イメージがBase64文字列に変換されたときにメモリ不足エラーに陥る可能性があるため、マイレージが異なる場合があります。

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

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

また、FileReader.readAsDataURL()を使用することもできます。

canvas.toDataURLメソッドは、以前のバージョンのAndroidでは実装されていません。