javascript Phonegap 编码图像 base64
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14286014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Phonegap encode image base64
提问by danielrvt-sgb
I'm trying to encode an image to base64 and send it to a server. When I retrieve the image all it shows is blank.
我正在尝试将图像编码为 base64 并将其发送到服务器。当我检索图像时，它显示的所有内容都是空白的。
The code I'm using to encode it is this:
我用来编码它的代码是这样的：
encodeImageUri = function(imageUri) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
c.width = this.width;
c.height = this.height;
ctx.drawImage(img, 0, 0);
};
img.src = imageUri;
var dataURL = c.toDataURL("image/jpeg");
return dataURL.slice(22, dataURL.length);
}
Taken from: Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone
回答by Zorayr
I use the following code to convert an image to Base64:
我使用以下代码将图像转换为 Base64：
var Base64 = {
/**
* This implementation relies on Cordova 1.5 or above implementations.
*/
getBase64ImageFromInput : function (input, callback) {
var imageReader = new FileReader();
imageReader.onloadend = function (evt) {
if (callback)
callback(evt.target.result);
};
//Start the asynchronous data read.
imageReader.readAsDataURL(input);
},
formatImageSrcString : function (base64) {
return (base64.match(/(base64)/))? base64 : "data:image/jpeg;base64," + base64;
}
};
Below is an example using this object to convert an image from a file input to base64 encoding:
下面是使用此对象将图像从文件输入转换为 base64 编码的示例：
var fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.onchange = function () {
var input = this.files[0];
if (input) {
Base64.getBase64ImageFromInput(input, function (imageData) {
//Process the image string.
console.log(imageData);
});
} else {
alert("Please select an image.");
}
};
Hope this helps. Let me know if you have any questions.
希望这可以帮助。如果您有任何问题，请告诉我。
回答by Rocket Hazmat
The image is loading asynchronously, meaning that your return dataURL...happens beforethe image is loaded into the canvas.
图像正在异步加载，这意味着您在图像加载到画布之前return dataURL...发生。
Instead of having this function return a value, have it call a callback function.
与其让这个函数返回一个值，不如让它调用一个回调函数。
encodeImageUri = function(imageUri, callback) {
var c = document.createElement('canvas');
var ctx = c.getContext("2d");
var img = new Image();
img.onload = function() {
c.width = this.width;
c.height = this.height;
ctx.drawImage(img, 0, 0);
if(typeof callback === 'function'){
var dataURL = c.toDataURL("image/jpeg");
callback(dataURL.slice(22, dataURL.length));
}
};
img.src = imageUri;
}
You now call it like this:
你现在这样称呼它：
encodeImageUri('/path/to/image.png', function(base64){
// Do something with the b64'd image
});
NOTE: For this to work, the image needs to be on the same domain as your page.
注意：为此，图像需要与您的页面位于同一域中。
回答by Simon MacDonald
Use the readAsDataURLmethod of FileReader.
使用FileReader的readAsDataURL方法。
