web-dev-qa-db-fra.com

Comment poster une image en encodage base64 via .ajax?

J'ai du code javascript qui télécharge une image sur un serveur. Ci-dessous, l'appel ajax qui fonctionne correctement.

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

J'ai maintenant besoin de télécharger l'image à l'aide d'un encodage base64.

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

Mais cela ne fonctionne pas, c’est-à-dire que le serveur ne reconnaît pas les données que j’envoie et se plaint.

Quelqu'un sait-il quel est le format correct pour l'envoi de données codées en Base64 dans l'appel AJAX?

javascriptjqueryajax
8
carbontracking

Merci pour toutes les réponses qui m'ont aidé.

J'avais également posté la question sur les forums sur https://social.msdn.Microsoft.com/Forums/en-US/807ee18d-45e5-410b-a339-c8dcb3bfa25b/testing-project-oxford-ocr-how- à utiliser-un-fichier-local-dans-base64-par-exemple? forum = mlapi (plus spécifique au Projet Oxford) et entre leurs réponses et celles que vous avez, j'ai une solution.

  1. Vous devez envoyer un blob
  2. Vous devez définir les options processData:false et contentType: 'application/octet-stream' dans l'appel .ajax

Donc, ma solution ressemble à ceci

D'abord une fonction pour créer le blob (ceci est copié textuellement d'une personne plus douée que moi)

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

et alors

$.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");});
18
carbontracking

Ceci est un code de travail de ma propre application. Vous devrez modifier les arguments contentType et data dans vos opérations 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);
            } 
        });
2
Glenn Ferrie
//After received the foto, convert to byte - C# code
Dim imagem = imagemBase64.Split(",")(1)
Dim bytes = Convert.FromBase64String(imagem)

Vous chargez l'image dans la zone de dessin, pas nécessairement télécharger sur le serveur.

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

Vous voyez, ce code obtient une image et dessine dans canvas, après avoir dessiné, vous obtenez une chaîne base64 avec canvas.toDataURL ()

essayez ceci: D

0
RBoschini