惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Azure Blog
Microsoft Azure Blog
J
Java Code Geeks
量子位
腾讯CDC
C
Check Point Blog
小众软件
小众软件
IT之家
IT之家
I
InfoQ
Hugging Face - Blog
Hugging Face - Blog
Stack Overflow Blog
Stack Overflow Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
GbyAI
GbyAI
Apple Machine Learning Research
Apple Machine Learning Research
大猫的无限游戏
大猫的无限游戏
博客园_首页
S
SegmentFault 最新的问题
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
aimingoo的专栏
aimingoo的专栏
P
Proofpoint News Feed
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Google DeepMind News
Google DeepMind News
T
Tailwind CSS Blog
Martin Fowler
Martin Fowler

博客园 - 浙林龙哥

S3 put object upload file,被AI欺骗的一天 咖啡之约--体验 SourceAnywhere 安装node.js / npm / express / KMC 选择沃阁橱柜 ASP.NET 4.0的ClientIDMode=”Static”未必是最好 VS 2010 和 .NET 4.0 系列之《ASP.NET 4 Web Forms 的整洁HTML标识 — 客户端ID》篇 .NET 3.5 Ruby学习1-字符串 ImageMagick 详细安装使用 linux (jmagick) Windows XP 上安装 Bind9 BIND9配置 [javascript] 数组去重问题 [javascript]数组去重 数组A和B找交集 淘宝图片空间---设计师可免费申请短链接啦! php框架 How to use iBatis/NHibernate in medium trust/partial trust environments like Mosso JVM调优 常用的eclipse plugins
How to get blob data using javascript XmlHttpRequest by sync
浙林龙哥 · 2014-11-11 · via 博客园 - 浙林龙哥

Tested:

Firefox 33+ OK

Chrome 38+ OK

IE 6 -- IE 10 Failed

Thanks to 阮一峰's blog: http://www.ruanyifeng.com/blog/2012/09/xmlhttprequest_level_2.html

The sample shows how to get blob data using javascript XmlHttpRequest by sync.

The w3c tell us cannot set responseType when async is false.

FROM: http://www.w3.org/TR/2012/WD-XMLHttpRequest-20121206/
If async is false, the JavaScript global environment is a document environment, and either the anonymous flag is set, the timeout attribute value is not zero, the withCredentials attribute value is true, or the responseType attribute value is not the empty string, throw an "InvalidAccessError" exception and terminate these steps.

The result is that the type of XMLHttpRequest.response always string, you must change string to blob.
if you not set "charset=x-user-defined", the string is ascii by default. The XMLHttpRequest.response is not correct, some bytes are changed.
I set to utf-8 or utf-16 also for test, but failed.
when using utf-8, the length of XMLHttpRequest.response is not correct
when using utf-16, the length equals to Real-Length/2. the problem is when Real-Length is odd I cannot get the last byte.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="aabb"></div>
<script>

var URL = URL || window;

function saveAs(blob, filename) {
var type = blob.type;
var force_saveable_type = 'application/octet-stream';
if (type && type != force_saveable_type) {
var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
blob = slice.call(blob, 0, blob.size, force_saveable_type);
}

var url = URL.createObjectURL(blob);
console.log(url);
var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = url;
save_link.download = filename;
save_link.text = 'ffff';

/*
// in firefox 33+
var m = document.getElementById('aabb');
m.innerHTML = '<a href="' +url+ '">FFF</a>';
*/

// in chrome 38+
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
URL.revokeObjectURL(url);

}

function binaryToBlob(data) {
var l = data.length, arr = new Uint8Array(l);

for(var i = 0; i < l; i++) {
arr[i] = data.charCodeAt(i);
}

return new Blob([arr], { type: 'image/octet-stream'})
};

(function(){
var r = new XMLHttpRequest();
r.open("GET", 'a.tif', false);
r.overrideMimeType('text/plain; charset=x-user-defined'); // this line is very important ,the charset must be x-user-defined
r.send();

var blob = binaryToBlob(r.response);
blob.fileType = "image/octet-stream";
saveAs(blob, 'res.tif');

})();


</script></body></html>