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. mysql的一个特殊问题 you can't specify target table 'cpn_regist' for update in FROM clause

    今天在操作数据库的时候遇到了一个问题,sql语句如下: UPDATE cpn_yogurt_registration SET dep1Name = '1' WHERE `key` in  (SELEC ...

  2. mysql术语解释

    数据库(database): 数据表的集合: 数据表 (table):数据的矩阵: 列(column): 相同属性的数据的集合: 行(row): 一个对象的各种属性数据的集合: 冗余():一个字段在多 ...

  3. SD-WAN技术分析

    1.概述 转载须注明来自 SDNLAB并附上本文链接. 本文链接:http://www.sdnlab.com/17810.html 宽带接入以及Internet骨干网容量的持续提升,促使企业WAN技术 ...

  4. Oracle primary,unique,foreign 区别，Hibernate 关联映射

    Oracle primary,unique,foreign 区别 转:http://www.cnblogs.com/henw/archive/2012/08/15/2639510.html NOT N ...

  5. <T>的用法

    ///类型转换 template <class T1,class T2> vector<T2> ObjcetsSwap(vector<T1> objects) { ...

  6. (2016春) 作业1：博客和Github简单练习

    0. 博客和Github简单练习 总分:10分 1. 目的 博客使用:注册.发布博客.博客管理练习 Github使用:注册.文件同步等练习 2. 要求 (总体作业要求参考[链接]) 发布一篇博客: 介 ...

  7. ［MySQL］load data local infile向MySQL数据库中导入数据时，无法导入和字段不分离问题。

    利用load data将文件中的数据导入数据库表中的时候,遇到了两个问题. 首先是load data命令无法执行的问题: 命令行下输入load data local infile "path ...

  8. PHP异步工作避免程序运行超时

    应用案例: 某SNS社区要求用户给自己好友(好友数量上百个)发送邮件,每封邮件内容不一,发送后提示发送完毕! 常用PHP写法 sendmail.php <?php $count=count($e ...

  9. Mybatis中模糊查询的各种写法

    1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{text}), '%'); 2. 使用 ${...} ...

  10. 2.5 ListView

    ListView的工作原理如下: ListView 针对每个item,要求 adapter "返回一个视图" (getView),也就是说ListView在开始绘制的时候,系统首先 ...