如何通过.ajax以base64编码发布图像？
我有一些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" }', }) 我现在需要上传图像aa base64编码，例如
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'
但这不起作用，即服务器无法识别我发送和抱怨的数据。
有谁知道在AJAX调用中发送base64编码数据的正确格式是什么？
感谢所有帮助我的答案。
我还在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特定），在他们的答案和你的答案之间，我有一个解决方案。
- 你需要发一个Blob
- 您需要在.ajax调用中设置
processData:false和contentType: 'application/octet-stream'选项
所以我的解决方案就像这样
首先是制作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");});
这是我自己的应用程序中的一些工作代码。 您需要更改ajax操作中的contentType和data args。
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)
您在canvas中加载图像，而不必上传到服务器。
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上绘制，绘制后你得到了带有canvas.toDataURL（）的base64字符串
试试这个：D
jQuery的$ .ajax调用的data参数可以是String，Object或Array。 根据您提供的工作示例，您的上传脚本看起来需要一个名为“Url”的参数：
data: '{ "Url": "http://images.takungpao.com/2012/1115/20121115073901672.jpg" }'
如果要将参数作为Object传递，可以尝试：
data: { Url: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z' }
如果要将其作为String传递，可以尝试：
data: '{ "Url": "data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z"}'