专栏首页hbbliyongHTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换

1.将String字符串转换成Blob对象

//将字符串 转换成 Blob 对象
var blob = new Blob(["Hello World!"], {
    type: 'text/plain'
});
console.info(blob);
console.info(blob.slice(1, 3, 'text/plain'));

2.将TypeArray  转换成 Blob 对象

//将 TypeArray  转换成 Blob 对象
var array = new Uint16Array([97, 32, 72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100, 33]);
//测试成功
//var blob = new Blob([array], { type: "application/octet-binary" });
//测试成功, 注意必须[]的包裹
var blob = new Blob([array]);
//将 Blob对象 读成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result); //a Hello world!
}

ArrayBuffer转Blob

var buffer = new ArrayBuffer(32);
var blob = new Blob([buffer]);       // 注意必须包裹[]

3,将Blob对象转换成String字符串,使用FileReader的readAsText方法

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成字符串
var reader = new FileReader();
reader.readAsText(blob, 'utf-8');
reader.onload = function (e) {
    console.info(reader.result);
}

4.将Blob对象转换成ArrayBuffer,使用FileReader的 readAsArrayBuffer方法

//将字符串转换成 Blob对象
var blob = new Blob(['中文字符串'], {
    type: 'text/plain'
});
//将Blob 对象转换成 ArrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
    console.info(reader.result); //ArrayBuffer {}
    //经常会遇到的异常 Uncaught RangeError: byte length of Int16Array should be a multiple of 2
    //var buf = new int16array(reader.result);
    //console.info(buf);

    //将 ArrayBufferView  转换成Blob
    var buf = new Uint8Array(reader.result);
    console.info(buf); //[228, 184, 173, 230, 150, 135, 229, 173, 151, 231, 172, 166, 228, 184, 178]
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };

    //将 ArrayBufferView  转换成Blob
    var buf = new DataView(reader.result);
    console.info(buf); //DataView {}
    reader.readAsText(new Blob([buf]), 'utf-8');
    reader.onload = function () {
        console.info(reader.result); //中文字符串
    };
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 设置WPF窗体全屏显示:

    //全屏代码: private void Window_Loaded(object sender, RoutedEventArgs e) { // 设...

    hbbliyong
  • WebBrowser(IE) 与 JS 相互调用

    在开发中我们经常将WebBrowser控件嵌入Winform 程序来浏览网页,既然是网页那么少不了JS。下面就让我们来说说他们两之间的相互调用。 在C#封装的浏...

    hbbliyong
  • c# 获取串口设备的输入(unsigned char *和 char*)

    因为是C#,所以平台肯定是.NET了。 之前因为一个小小的业务需要接触了下密码键盘的操作。其实就是简单的获取用户输入密码的操作,没碰到什么大的问题,但是查资料的...

    hbbliyong
  • 关于 Blob

    对于 Blob,前端开发中可能比较少遇到;数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于数据库中,以...

    Krry
  • 赵丽颖公布婚讯致微博瘫痪, 新浪程序员转发:能否提前打个招呼!

    我们都知道,在10月16号这一天,大家常玩微博的小伙伴都发现微博又陷入到了突然的瘫痪之中,这可是让大家急坏了。好多网友都说,明明就是想吃一下赵丽颖还有冯绍峰的瓜...

    一墨编程学习
  • 你不知道的 Blob

    如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,并根据实际需求进行适当的调整。对于...

    阿宝哥
  • CRM product UI里assignment block的显示隐藏逻辑

    我们在product overview page里能看到很多的assignment block。但是runtime的时候真正显示出来的内容只是configura...

    Jerry Wang
  • JavaScript事件探秘

    事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流

    Dunizb
  • JS 操作 HTML 自定义属性

    跟着阿笨一起玩NET
  • 产业安全专家谈丨重大事件及时刻,企业如何做好网络安全重保?

    网络犯罪已经发展成为全球最大、增长最快的犯罪经济之一。据统计,2016年,网络攻击和数据泄露总计在全球造成4500亿美元经济损失。2021年,这一数字将增加到1...

    腾讯安全

扫码关注云+社区

领取腾讯云代金券