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. 从php脚本到浏览器,编码方式浅析

    今天简单看了一下php,服务器,浏览器如何设定编码 1.php 在php配置文件php.ini中,可以设置字符编码 ; PHP's default character set is set to em ...

  2. 简述UICollectionView 使用

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

  3. ASP.NET反射（转载）

    两个现实中的例子:1.B超:大家体检的时候大概都做过B超吧,B超可以透过肚皮探测到你内脏的生理情况.这是如何做到的呢?B超是B型超声波,它可以透过肚皮通过向你体内发射B型超声波,当超声波遇到内脏壁的时 ...

  4. net.sf.json.JSONObject 和org.json.JSONObject 的差别

    http://my.oschina.net/wangwu91/blog/340721 net.sf.json.JSONObject 和org.json.JSONObject  的差别. 一.创建jso ...

  5. 初识Android && 搭建Android开发环境

    搭建Android开发环境需要的工具: JDK(Java Development Kit) Eclipse Android Sdk(Software Development Kit) ADT (And ...

  6. 不可变String

    1,什么是不可变String? String对象是不可变的.当试图修改String值的时候,实际上都是创建一个全新的String对象,该对象包含修改后字符串的值,而最初的对象则没有发生改变. pack ...

  7. Postman-简单使用

    Postman-简单使用 Postman-进阶使用 Postman-CI集成Jenkins Postman功能(https://www.getpostman.com/features) 主要用于模拟网 ...

  8. python基础整理笔记（五）

    一. python中正则表达式的一些查漏补缺 1.  给括号里分组的表达式加上别名:以便之后通过groupdict方法来方便地获取. 2.  将之前取名为"name"的分组所获得的 ...

  9. 技术文档--svn

    1.什么是版本控制,说出常见的版本控制系统及其区别版本控制它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编 ...

  10. struts 标签<s:ierator>的简单使用说明

    struts 标签<s:ierator>的简单使用说明,只显示<s:ierator> 的前6条数据 <s:iterator value="lstVisitor& ...