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. 文件上传之Html5 + jQuery上传、asp.net web api接收

    HTML: <div> <label for="fileUpload"> 选择文件 </label> <br/> <input ...

  2. hdu 5818 (优先队列) Joint Stacks

    题目:这里 题意: 两个类似于栈的列表,栈a和栈b,n个操作,push a x表示把数x放进a栈的栈底,pop b 表示将栈b的栈顶元素取出输出,并释放这个栈顶元素,merge a b表示把后面的那个 ...

  3. 我开发的Quartz Cron表达式生成器

    Cron Expressions——Cron 表达式 Cron表达式被用来配置CronTrigger实例.Cron表达式是一个由7个子表达式组成的字符串.每个子表达式都描述了一个单独的日程细节.这些子 ...

  4. poj3050

    #include <stdio.h> #include <set> #include <string> using namespace std; int a[6]; ...

  5. pushlet实现服务器端向客户端推送信息

    使用Pushlet来实现服务器端向客户端推送信息 1.   实现方式: 有两种实现方式: 1.         通过配置文件来实现定时的从服务器端向客户端推送信息 2.         通过API主动 ...

  6. maven 创建Hadoop程序

    这里用来将新建的maven project 放入到现有的maven working set 中,这样我们就能看到项目之间的层级关系 选择下面的程序 在父项目中创建公共的pom,在pom中维护项目所需要 ...

  7. Floyd 求最短路（poj 1161）

    Floyd-Warshall算法介绍: Floyd-Warshall算法的原理是动态规划. 设为从到的只以集合中的节点为中间节点的最短路径的长度. 若最短路径经过点k,则: 若最短路径不经过点k,则. ...

  8. linux 下 jdk+tomcat+mysql 的 jsp 环境搭建

    JDK 在 linux 下安装 1.          把安装文件放在 /opt 下,并执行 [root@localhost opt]# ./jdk-1_5_0_06-linux-i586.bin 并 ...

  9. MySQL大小写敏感说明

    Linux环境下,不是windows平台下.区别很大.注意. 一图胜千言   mysql> show create table Ac; +-------+-------------------- ...

  10. css3动画属性(transitions:property duration timing transition-delay)

    transitions:property duration timing-function; transitionst他有三个参数:1) property:属性设置,例如background,colo ...