如何在javascript中base64编码图像

I am developing a phonegap application and using the navigator.getPicture method to get the images.

我正在开发一个phonegap应用程序并使用navigator.getPicture方法来获取图像。

The way I am getting the picture is:

我得到这张照片的方式是:

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

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

Just like the example in phonegap doc's.

就像phonegap doc中的例子一样。

I want to be able to use the imageURI and then convert it to image data in order to upload it later. (I don't want to use phonegap's FileTransfer)

我希望能够使用imageURI,然后将其转换为图像数据,以便以后上传。 (我不想使用phonegap的FileTransfer)

So far I have tried both Get image data in JavaScript? and How can you encode a string to Base64 in JavaScript?

到目前为止,我已尝试用JavaScript获取图像数据?如何在JavaScript中将字符串编码为Base64?

When I try the following,

当我尝试以下,

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

And print dataURL before returning. I just get data:, as the content.

并在返回之前打印dataURL。我只是得到数据:,作为内容。

Any ideas on what I'm doing wrong?

关于我做错的任何想法?

1 个解决方案

#1

Well you can try getting it as a DATA_URL. Your mileage may vary as you could run into an out of memory error when the image is converted to a Base64 string.

那么你可以尝试将它作为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;
}

Alternatively you can use the FileReader.readAsDataURL().

或者,您可以使用FileReader.readAsDataURL()。

The canvas.toDataURL method is not implemented on earlier versions of Android.

早期版本的Android上未实现canvas.toDataURL方法。

#1