Come postare un'immagine nella codifica base64 via .ajax?

Question

Ho un codice javascript che carica un'immagine su un server. Di seguito è la chiamata Ajax che funziona correttamente.

$.ajax({ 
    url: 'https://api.projectoxford.ai/vision/v1/analyses?', 
    type: 'POST', 
    contentType: 'application/json', 
    data: '{ "Url": "http://images.takungpao.com/2012/1115/20121115073901672.jpg" }', 
}) 

Ora ho bisogno di caricare l'immagine una codifica base64, ad es.

data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z' 

Ma ciò non funziona, cioè il server non riconosce i dati che invio e si lamenta.

Qualcuno sa qual è il formato corretto per l'invio di dati codificati Base64 nella chiamata AJAX?

Answer 1

Grazie per tutte le risposte che mi hanno aiutato lungo.

Avevo anche inviato la domanda ai forum su https://social.msdn.microsoft.com/Forums/en-US/807ee18d-45e5-410b-a339-c8dcb3bfa25b/testing-project-oxford-ocr-how-to-use-a-local-file-in-base64-for-example?forum=mlapi (più specifiche di Progetto Oxford) e tra le loro risposte e le tue ho una soluzione.

1. è necessario inviare un Blob
2. È necessario impostare le opzioni di processData:false e contentType: 'application/octet-stream' nel .ajax chiamare

Quindi la mia soluzione si presenta così

In primo luogo una funzione per fare il blob (Questo è copiato testualmente da qualcuno più dotato di me)

makeblob = function (dataURL) { 
      var BASE64_MARKER = ';base64,'; 
      if (dataURL.indexOf(BASE64_MARKER) == -1) { 
       var parts = dataURL.split(','); 
       var contentType = parts[0].split(':')[1]; 
       var raw = decodeURIComponent(parts[1]); 
       return new Blob([raw], { type: contentType }); 
      } 
      var parts = dataURL.split(BASE64_MARKER); 
      var contentType = parts[0].split(':')[1]; 
      var raw = window.atob(parts[1]); 
      var rawLength = raw.length; 

      var uInt8Array = new Uint8Array(rawLength); 

      for (var i = 0; i < rawLength; ++i) { 
       uInt8Array[i] = raw.charCodeAt(i); 
      } 

      return new Blob([uInt8Array], { type: contentType }); 
     } 

e quindi

$.ajax({ 
    url: 'https://api.projectoxford.ai/vision/v1/ocr?' + $.param(params), 
    type: 'POST', 
    processData: false, 
    contentType: 'application/octet-stream', 
    data: makeblob('data:image/jpeg;base64,9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z' 
}) 
.done(function(data) {alert("success");}) 
.fail(function() {alert("error");}); 

Answer 2

//After received the foto, convert to byte - C# code 
Dim imagem = imagemBase64.Split(",")(1) 
Dim bytes = Convert.FromBase64String(imagem) 

Si carica l'immagine nell'area di lavoro, non è necessario caricare sul server.

var ctx = canvas.getContext('2d'); 
ctx.drawImage(img, selection.x, selection.y, selection.w, selection.h, 0, 0, canvas.width, canvas.height); 

var ctxPreview = avatarCanvas.getContext('2d'); 
ctxPreview.clearRect(0, 0, ctxPreview.width, ctxPreview.height); 


ctxPreview.drawImage(img, selection.x, selection.y, selection.w, selection.h, 0, 0, canvas.width, canvas.height); 

$('#avatarCanvas').attr('src', canvas.toDataURL()); 
$('#hdImagembase64').val(canvas.toDataURL()); 

See, questo codice ottenere immagine e disegnare in tela, dopo il pareggio si ottiene stringa base64 con canvas.toDataURL()

provare questo: D

Answer 3

Questo è un codice di lavoro dalla mia applicazione. Sarà necessario modificare gli argomenti contentType e data nelle operazioni Ajax.

var video = that.vars.video; 
    var code = document.createElement("canvas"); 

    code.getContext('2d').drawImage(video, 0, 0, code.width, code.height); 

    var img = document.createElement("img"); 
    img.src = code.toDataURL();  

    $.ajax({ 
     url: '/scan/submit', 
     type: 'POST', 
     data: { data: code.toDataURL(), userid: userid }, 
     success: function (data) { 
      if (data.error) { 
       alert(data.error); 
       return; 
      } 
      // do something here. 
     }, 
     error : function (r, s, e) { 
       alert("Unexpected error:" + e); 
       console.log(r); 
       console.log(s); 
       console.log(e); 
      } 
     }); 

Answer 4

Il parametro di dati per la chiamata $ .ajax di jQuery può essere una stringa, un oggetto o una matrice. Sulla base dell'esempio di lavoro ti ha dato, sembra che lo script di upload si aspetta un parametro chiamato "URL":

data: '{ "Url": "http://images.takungpao.com/2012/1115/20121115073901672.jpg" }' 

Se si voleva passare il parametro come un oggetto, si potrebbe provare:

data: { 
    Url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z' 
} 

Se si desidera passare come una stringa, si potrebbe provare:

data: '{ "Url": "data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z"}'