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>

How to get blob data using javascript XmlHttpRequest by sync的更多相关文章

  1. caffe出错：Unknown bottom blob 'data' (layer 'conv1', bottom index 0)

    原文https://blog.csdn.net/u011070171/article/details/75425740 caffe训练出现如下错误: Unknown bottom blob 'data ...

  2. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  3. [Javascript]XMLHttpRequest对象实现下载进度条

    摘要 可以通过设置一个XMLHttpRequest对象的responseType属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&q ...

  4. JavaScript——XMLHttpRequest 家族

    https://www.zhangxinxu.com/wordpress/2013/10/understand-domstring-document-formdata-blob-file-arrayb ...

  5. [JavaScript] XMLHttpRequest记录

    XMLHttpRequest 使用 XMLHttpRequest 对象可以和服务器进行交互,可以获取到数据,而无需让整个页面进行刷新.这样 web 页面可以做到只更新局部页面,降低了对用户操作的影响. ...

  6. [javascript]XMLHttpRequest GET/SET HTTP头与改变HTTP METHOD示例代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. directly receive json data from javascript in mvc

    if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...

  8. Operate blob data in Oracle via C#

    oracle table: CREATE TABLE "SCOTT"."TEST_BLOB"    (    "NAME" VARCHAR2 ...

  9. javascript XMLHttpRequest 对象的open() 方法参数说明

    下文是从w3c上摘录下来的,其中参数 method 说明的很简短,不是很理解,所以又找了些资料作为补充.文中带括号部分. XMLHttpRequest.open() 初始化 HTTP 请求参数 语法o ...

随机推荐

  1. Servlet实现定时刷新到另外一个页面response.setHeader("refresh", "3;url=/...")

    想要实现,访问Responsedemo11的时候,3秒钟后,跳转到ResponseDemo10 用   response.setHeader("refresh", "3; ...

  2. 【随笔】ssh登录时如何直接在参数中加入登录密码

    如同apt-get安装程序时会有-y参数来避免交互输入一样,我也希望在ssh登录时能够直接附加登录密码以避免交互式输入密码这一步,网上找了找,方法很多. 比如直接通过密钥免密码登录,不过需要改动很多, ...

  3. hp小机定位网卡位置

    rad已经被olrad取代 HPUX下定位网卡位置                                                   一台HP小型机,可能配了多块网卡,在系统中以la ...

  4. Java script基础 回顾

    一.语法 代码与C#相似,变量使用的是var引用出来,包含所有类型:可以直接使用,不用定义. 也是有内置分类的.例如:var b="10"  var c=10;一个是字符串一个是整 ...

  5. 推荐一个C语言学习教程

    Linux C编程一站式学习 http://learn.akae.cn/media/index.html

  6. ubuntu 14.04下 horizon openstack_dashboard 的开发环境搭建

    序:公司要在openstack的基础上,做开发做产品,网上资料也不是很多,很多都是在来回copy,在此做个blog,慢慢更新,推动自己进步. 首先老话题:开发环境的搭建.     一个纯净的ubunt ...

  7. C++ map使用（基于hashtable）

    C++ map使用(基于hashtable) 实际上基于hashtable的map有两种一种是hash_map,unordered_map,但是最好使用后者,原因如下[1] 因为标准化的推进,unor ...

  8. 【转】Android 当打开“开发者模式”中的“不保留活动”后，程序应当怎么保持正常运行

    当打开这个设置以后,程序的Activity会自动销毁,每次返回的时候就会不断重oncreate,此时伴随的问题多多. 参考文档:http://www.bubuko.com/infodetail-960 ...

  9. Linq ExecuteQuery，ExecuteCommand

    //连接语句 public readonly string sqlconn = ConfigurationManager.ConnectionStrings["Transaction_9_3 ...

  10. 多重背包问题：悼念512汶川大地震遇难同胞——珍惜现在，感恩生活（HDU 2191）(二进制优化)

    悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 HDU 2191 一道裸的多重背包问题: #include<iostream> #include<algorithm> #i ...