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

У меня есть некоторый код 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?

Источник

4 ответа

Решение

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

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

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

Так что мое решение выглядит так

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

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");});
Источник

Это некоторый рабочий код из моего собственного приложения. Вам нужно будет изменить 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);
            } 
        });
Источник 
//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

Источник

Параметр данных для вызова $.ajax в jQuery может быть String, Object или Array. Исходя из приведенного вами рабочего примера, похоже, что ваш скрипт загрузки ожидает параметр с именем "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"}'
Источник
Другие вопросы по тегам