如何通过.ajax发布以base64编码的图像? [英] How to post an image in base64 encoding via .ajax?
问题描述
我有一些JavaScript代码可将图像上传到服务器.下面是可以正常工作的ajax调用.
I have some javascript code that uploads an image to a server. Below is the ajax call that works correctly.
$.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编码,例如
I now need to upload the image a a base64 encoding e.g.
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'
但这是行不通的,即服务器无法识别我发送和抱怨的数据.
But that doesn't work, i.e. the server doesn't recognise the data I send and complains.
有人知道在AJAX调用中发送base64编码数据的正确格式是什么吗?
Does anyone know what the correct format is for sending base64 encoded data in the AJAX call ?
推荐答案
感谢所有有助于我前进的答案.
Thanks for all the answers which helped me along.
I had also posted the question to the forums on 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 (more Project Oxford specific) and between their answers and your's I've got a solution.
- 您需要发送一个Blob
- 您需要在.ajax调用中设置
processData:false
和contentType: 'application/octet-stream'
选项
- You need to send a Blob
- You need to set the
processData:false
andcontentType: 'application/octet-stream'
options in the .ajax call
所以我的解决方案看起来像这样
So my solution looks like this
第一个创建blob的函数(从比我更有天赋的人逐字复制)
First a function to make the blob (This is copied verbatim from someone more gifted than I)
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发布以base64编码的图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!