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. Sql Server 孤立用户解决办法

    Sql Server 孤立用户 是我们经常遇到的事情,今天详细的梳理了下,希望能帮到你 当把用户数据库从一台 Sql Server 使用备份和恢复的方式迁移到另一台服务器.数据库恢复以后,原先用户定义 ...

  2. Lua.LearningLua.7-userdata

    Learning Lua: 7 - userdata 1. Userdata basic "There are eight basic types in Lua: nil, boolean, ...

  3. 简述UICollectionView 使用

    一.介绍 UICollectionView类负责管理数据的有序集合以及以自定义布局的模式来呈现这些数据,它提供了一些常用的表格(table)功能,此外还增加了许多单栏布局.UICollectionVi ...

  4. wxPython--Python GUI编程参考链接

    原文链接http://www.cnblogs.com/coderzh/archive/2008/11/23/1339310.html

  5. [VBS]关机恶作剧

    一.关于脚本 1)本文中的脚本完成以下功能: 随机生成3道二位数加法题,如果答题错误则在60秒后关机. 如果全答对了,也会在60后关机,但脚本会提示解除定时关机的办法 2)在脚本运行过程中,退出本脚本 ...

  6. UWP深入学习四:动画及图像

    Storyboarded animations Key-frame animations and easing function animations 缓动函数 缓动函数支持你将自定义数学公式应用到动 ...

  7. 《CSS3专业网页开发指南》笔记

    书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著    李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...

  8. Search in Rotated Sorted Array II leetcode

    原题链接,点我 该题解题参考博客 和Search in Rotated Sorted Array唯一的区别是这道题目中元素会有重复的情况出现.不过正是因为这个条件的出现,出现了比较复杂的case,甚至 ...

  9. sql关键字的解释执行顺序

      sql关键字的解释执行顺序 分类: 笔试面试总结2013-03-17 14:49 1622人阅读 评论(1) 收藏 举报 SQL关键字顺序 表里面的字段名什么符号都不加,值的话一律加上单引号 有一 ...

  10. bzoj 1977

    题意:求严格的次小生成树.点n<=100000,m<=300000 思路:很容易想到先做一边最小生成树,然后枚举每条非树边(u, v, w),然后其实就是把u,v路径上小于w的最大边替换成 ...