2013-01-11 174 views
5

我试图将图像编码为base64并将其发送到服务器。当我检索到的图像全部显示为空白。Phonegap编码图像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); 
    } 

来自Using PhoneGap, How to get base64 image data of the photo chosen from photo library in iPhone

回答

2

图像加载异步,也就是说你的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 
}); 

注:对于此工作,图像必须在同一个域作为你的页面。

+0

它仍然不起作用,我得到了一串A的字符串 –

+0

@ danielrvt-sgb:图像是否与您的页面在同一个域上?你确定这个字符串是错的吗? –

+0

图像与手机相机拍摄并存储在SD卡中。我测试了这个页面中的字符串:http://www.freeformatter.com/base64-encoder.html并返回一个空白图像 –

2

使用readAsDataURL方法FileReader

+0

如果没有关于创建FileEntry对象实例的文档,如何使用readAsDataUrl? –

+0

带你imageURI并将其传递给window.resloveLocalFileSystemURI,它将FileEntry对象作为成功回调的参数。然后你就可以使用FileReader来读取FileEntry。 –

+0

我得到resloveLocalFileSystemURI未定义 –

3

我使用下面的代码将图像转换为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."); 
    } 
}; 

希望这有助于。如果您有任何问题,请告诉我。