Как разместить изображение в кодировке base64 через .ajax?

Question

У меня есть код javascript, который загружает изображение на сервер. Ниже приведен вызов ajax, который работает правильно.

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

Теперь мне нужно загрузить изображение в кодировку base64, например.

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

Но это не работает, то есть сервер не распознает данные, которые я отправляю и жалуюсь.

Кто-нибудь знает, какой правильный формат предназначен для отправки данных с кодировкой base64 в вызове AJAX?

Answer 1

Спасибо за ответы на все вопросы, которые помогли мне с собой.

Я также разместил вопрос на форумах по адресу 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 (более конкретный проект Оксфорда), и между их ответами и вашим решением у меня есть решение.

1. Вы должны послать Blob
2. Вы должны установить processData:false и contentType: 'application/octet-stream' варианты в .ajax называют

Так что мое решение выглядит следующим образом

Первая функция, чтобы сделать the blob (Скопировано дословно из лица, более того, одаренного, чем я)

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

, а затем

$.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) 

Загрузка изображения в холсте, не требуется загрузка на сервер.

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

См, этот код получить изображение и рисовать в полотне, после розыгрыша вы получаете base64 строку с canvas.toDataURL()

попробовать это: D

Answer 3

Это некоторый рабочий код из моей заявление. Вам необходимо будет изменить аргументы contentType и data в ваших операциях 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

Параметр данных для вызова $ .ajax jQuery может быть строкой, объектом или массивом. Основываясь на рабочем примере вы дали, это выглядит как сценарий загрузки ожидает параметр, называемый «Url»:

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

Если вы хотите передать параметр в качестве объекта, вы можете попробовать:

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

Если вы хотите, чтобы передать его в виде строки, вы можете попробовать:

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