.ajax経由でbase64エンコーディングで画像を投稿するには？

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' 

しかし、それは動作しません。つまり、サーバーは送信したデータを認識せず、不平を言います。

AJAX呼び出しでbase64でエンコードされたデータを送信するための正しい形式は何ですか？

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（詳しくはオックスフォードプロジェクトの詳細）のフォーラムに質問を投稿しましたが、回答とあなたの解決策の間に解決策があります。あなたはアヤックスの呼び出しでprocessData:falseとcontentType: 'application/octet-stream'オプション

を設定する必要がありますが、ブロブに

を送信する必要が

1. だから私のソリューションは、作るために、この

   最初の関数のように見えますぼろぼろ（これは、私より才能のある人からそのまま生まれたものです）

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

を参照してください、このコードは、画像を取得し、キャンバスに描き、引き分けの後にあなたがcanvas.toDataURL（とbase64文字列を取得する）

これを試してみてください：D

Answer 3

これは私自身からいくつかの作業コードです応用。あなたのajax操作でcontentTypeとdata引数を変更する必要があります。

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

jQueryの$ .ajax呼び出しのデータパラメータには、String、Object、またはArrayを指定できます。あなたがオブジェクトとしてパラメータを渡したい場合は

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

は、あなたが試してみてください：

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

アップロードスクリプトは、「URL」と呼ばれるパラメータを期待するように、あなたが与えた実施例に基づいて、それが見えます

あなたは文字列としてそれを渡したい場合は、試してみてください：私を助けに沿って、すべての答えを

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