[英]Phonegap encode image base64
I'm trying to encode an image to base64 and send it to a server. 我正在尝试将图像编码为base64并将其发送到服务器。 When I retrieve the image all it shows is blank. 当我检索图像时,它显示的全部为空白。
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 取自: 使用PhoneGap,如何获取从iPhone中的照片库中选择的照片的base64图像数据
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. 如果您有任何疑问,请告诉我。
The image is loading asynchronously , meaning that your return dataURL...
happens before the 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. 注意:为此,图像需要与您的页面位于同一个域中。
使用FileReader的readAsDataURL方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.