如何在javascript中对图像进行base64编码

我正在开发phonegap应用程序并使用navigator.getPicture方法获取图像。如何在javascript中对图像进行base64编码

我收到图片的方式：

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的文件传输）

到目前为止，我曾经尝试都Get image data in JavaScript?和How can you encode a string to Base64 in JavaScript?

当我尝试以下方法，

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返回之前。我只是得到data:,作为内容。

关于我在做什么错的任何想法？

来源

2012-11-06 fabian

欢迎来到SQ。非常好的第一个问题！ +1 – simbabque

那么你可以尝试获取它作为一个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上实现。

来源

2012-11-07 01:35:12

嗨西蒙，我试着做readAsDataURL但没有运气。我不想使用DATA_URL，但我认为它可能是唯一的选择。谢谢。 – fabian

如何在javascript中对图像进行base64编码

回答

相关问题