Kodowanie obrazu bazowego Phonegap64

Question

Próbuję zakodować obraz na base64 i wysłać go na serwer. Po pobraniu obrazu wszystkie jego pokazy są puste.

Kod używam go do kodowania to:

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); 
    } 

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

Answer 1

Obraz jest ładowanie asynchronicznie, co oznacza, że ​​return dataURL... dzieje przed obraz jest załadowany do płótna.

Zamiast funkcji zwracania wartości, wywołaj funkcję zwrotną.

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; 
} 

teraz nazwać tak:

encodeImageUri('/path/to/image.png', function(base64){ 
    // Do something with the b64'd image 
}); 

UWAGA: Aby to zadziałało, obraz musi być w tej samej domenie co strony.

Answer 2

Użyj metody readAsDataURL z FileReader.

Answer 3

używam następujący kod do konwersji obrazu do 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; 
    } 
}; 

Poniżej znajduje się przykład korzystania z tego obiektu do konwersji obrazu z wejścia plików do kodowania 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."); 
    } 
}; 

Nadzieja to pomaga. Daj mi znać, jeśli masz jakieś pytania.