[英]Phonegap encode image base64
我正在嘗試將圖像編碼為base64並將其發送到服務器。 當我檢索圖像時,它顯示的全部為空白。
我用來編碼的代碼是這樣的:
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);
}
我使用以下代碼將圖像轉換為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;
}
};
下面是使用此對象將圖像從文件輸入轉換為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.");
}
};
希望這可以幫助。 如果您有任何疑問,請告訴我。
圖像是異步加載的,這意味着return dataURL...
在圖像加載到畫布之前發生。
不要讓這個函數返回一個值,而是讓它調用一個回調函數。
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;
}
你現在稱它為:
encodeImageUri('/path/to/image.png', function(base64){
// Do something with the b64'd image
});
注意:為此,圖像需要與您的頁面位於同一個域中。
使用FileReader的readAsDataURL方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.