我有一些可能的解决方案...
解决方案 1
如果您的图像小于 25kb,您可以通过 YQL 执行以下操作:select * from data.uri where url="http://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery@2x.png" 这样您就可以抓取 base64 图像并继续。要通过 YQL 进行 POST,您应该添加类似 and postdata="foo=foo&bar=bar" 的内容,请查看 this article。
警告:这种方法的性能可能不是很好。从最终用户到 YQL 到服务的跃迁,然后一直返回,存在相当多的延迟。还有一些服务器端处理 YQL 对图像进行 base64 编码并提供一些 JSON 响应。
解决方案 2
启用 CORS 或通过其他代理。一旦你这样做了,如果你仍然无法获得 base64 数据,那么你需要做两件事。首先添加一个处理二进制的 jQuery 传输。其次处理二进制 blob 并将其转换为 base64。
这是我找到的jQuery Binary Transport
$.ajaxTransport("+binary", function(options, originalOptions, jqXHR){
// check for conditions and support for blob / arraybuffer response type
if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob)))))
{
return {
// create new XMLHttpRequest
send: function(headers, callback){
// setup all variables
var xhr = new XMLHttpRequest(),
url = options.url,
type = options.type,
async = options.async || true,
// blob or arraybuffer. Default is blob
dataType = options.responseType || "blob",
data = options.data || null,
username = options.username || null,
password = options.password || null;
xhr.addEventListener('load', function(){
var data = {};
data[options.dataType] = xhr.response;
// make callback and send data
callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
});
xhr.open(type, url, async, username, password);
// setup custom headers
for (var i in headers ) {
xhr.setRequestHeader(i, headers[i] );
}
xhr.responseType = dataType;
xhr.send(data);
},
abort: function(){
jqXHR.abort();
}
};
}
});
添加传输后,您可以发出任何类型的 AJAX 请求。
$.ajax({
type: "POST",
url: 'http://myservice.com/service/v1/somethingsomething',
dataType: 'binary',
success: function(imgData) {
var img = new Image(),
reader = new window.FileReader();
reader.readAsDataURL(imgData);
reader.onloadend = function() {
img.src = reader.result
$('#logo-events').append(img);
}
}
});
读者应使用Blob 并输出base64 版本。当阅读器完成转换/阅读时,它将创建和图像并将其附加到某处。 GET 或 POST 应该不再重要了。