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); //中文字符串
    };
}
参考:https://www.cnblogs.com/tianma3798/p/5834598.html



将file转化成base64

场景: 获取到一个file类型的图片,如果直接在html中预览?这里就是利用html5的新特性,将图片转换为Base64的形式显示出来。有两种方法:

  • 方法一:利用URL.createObjectURL()
<!DOCTYPE html>
<html>
<head>
	<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
	window.onload = function () {
		let $img = document.getElementById('img')
		file.onchange = function (e) {
			console.log(e.target.files[0])
			let file = e.target.files[0]
			let fileUrl = window.URL.createObjectURL(file)
			$img.src = fileUrl
			img.onload = function () {
			    // 手动回收
			    URL.revokeObjectURL(fileUrl)
			}
		}
	}
</script>
</body>
</html>
复制代码

当选择图片后,生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff",能正常显示图片。

  • 方法二: 利用FileReader.readAsDataURL()
<!DOCTYPE html>
<html>
<head>
	<title>base</title>
</head>
<body>
<input type="file" name="" id="file">
<img src="" id="img">
<script type="text/javascript">
	window.onload = function () {
		let $img = document.getElementById('img')
		file.onchange = function (e) {
			console.log(e.target.files[0])
			let file = e.target.files[0]
			const fr = new FileReader(file)
			fr.readAsDataURL(file)
			fr.onload = function () {
			 	$img.src = this.result
			}
		}
	}
</script>
</body>
</html>
复制代码

img标签的src将会是像这样:"data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAA==,能够正常显示。

canvas 转为DataURL

场景: canvas画出来的图片,在html中的其他地方显示。这里的方法也是可以将canvas输出为Dataurl的来放到img标签中。

let imgSrc = canvas.toDataURL('image/png')
// canvas.toDataURL('image/jpeg')
复制代码

canvas转为blob对象

场景: canvas生成的图片,如何上传到七牛云或服务器?答案是将canvas输出为Blob对象,这样就可以像File对象一样操作它了。

 canvas.toBlob(function (blobObj) {
	console.log(blobObj)
})
复制代码

Blob对象显示图片

场景: 获取到的图片是Blob格式的,如何显示在html中?答案还是将Blob对象转换为DataUrl的形式。

canvas.toBlob(function (blobObj) {
	let imgSrc = window.URL.createObjectURL(blobObj)
	document.getElementById('img').src = imgSrc
})
复制代码

下载DataURL表示的图片

场景: html中一张用DataURL形式显示出来的图片,可以下载到本地吗?答案是使用一个a标签,并设置download属性,模拟点击。

function downloadImg () {
	let aLink = document.createElement('a')
	aLink.download = 'fileName.png' // 文件名后缀需要和dataurl表示的相同,否则可能乱码
	aLink.href = dataUrl
	aLink.click()
}
复制代码

参考文章



链接:https://juejin.im/post/5b5187da51882519ec07fa41



与本文有关的文章

express/ multer 上传图片文件 html图片延迟加载 一段奇葩Javascript代码引发的思考 JavaScript两个变量交换值(不使用临时变量) ES6中Math对象的部分扩展 JavaScript中为什么string可以拥有方法? 前端js中经常出现的算法总结 canvas粒子瀑布 canvas纺纱飘带 JavaScript求最长公共子串 JavaScript中的__proto__ JS判断访问设备或型号 js获取url?后的参数 js键盘keyCode对照表 页面鼠标滚动事件 对象克隆或拷贝不是赋值 URL参数含有中文出现乱码 es6常用的的语法大集合 js中的this关键字 js中实现 a*寻路算法 js中用 '==' 还是 '===' web性能优化 reflow(回流)与repaint(重绘) 7年前端大神总结出的js经验 scroll事件常用到的场景,以及判断 js中深度拷贝与浅拷贝 requirejs基础知识 判断参数是什么类型?array?object? 有趣的js基础选择题 js中哪些值能作为if的条件,if使用小技巧 js中键盘按下事件keydown js中的!function到底是什么意思? AMD与CMD的区别到底在哪? Array与Math属性 方法一览 js中的栈与堆 jquery为动态添加生成的元素添加绑定事件 delegate 自己常用的正则(regexp)整理 57秒读完《10 分钟学会 JavaScript 的 Async/Await》 最简单的数组去重 js中数字调用方法 jq或者原生js动态加载js文件方法 个人常用封装的js插件 select默认选中某个option 正则表达式提取cookie 原生ajax写法 js倒计时方法 js 时间戳相关操作方法 html关于页面跳转url带参数 indexOf,charAt,subString的简要区别 JS页面返回带参数或者保持原有位置 js中的钩子机制(hook) vue中的addClass removeClass &#x(unicode编码后的汉字)JS转译方法-nodejs爬虫转译乱码 es6/7 js数组深拷贝和数组合并方法 【html5】原生JS控制video的播放和暂停切换 前端 fetch 前端 PWA? js处理手机号|身份证中间替换成 * 号 js时间戳转换为本地时间 timestamp>localtime es6中 数组位置对换 js 数组对象循环各种方法以及性能对比 js实用黑科技之生产随机数 js加密之AES es6遍历对象方法 js删除字符串的的方法 JS中的Array长度最大可以设置为多少? html img加载失败的话替换成默认图片 图片压缩插件 lrz.bundle.js js手机号中间四位变成*号 javascript 到底要不要加分号 酷炫烟雾效果的前端js插件 waterpipe.js js稀奇古怪问题之指向 现代浏览器和触摸设备上重新排序拖放列表 - Sortable.min.js 一个监听键盘的js库 - hotkeys.js canvas操作图片合成 或文字叠加 并导出base64 字符转换-unicode <=> ASCII js删除某一个指定元素 禁止 百度ueditor过滤script link js正则效验金额最多两位小数 原生js获取元素offsetTop值不准确? 浏览器控制台跳过debugger 打乱数组顺序的两种方法 js 中的 bind介绍 原生js移除元素 document.removeElementById ?? js string进制互转 input 点击选择全部文本 点击全选 js点击复制input的值 JS/JQ获取各种屏幕的高度和宽度 闭包之[[Scopes]]属性 JS操纵html5 audio 播放以及暂停 原生js 给dom添加 onmouseenter ontouchstart 事件 Js charCodeAt fromCharCode parseInt js位操作教程 js byte[] 和string 相互转换 UTF-8 data URI 转 image data 原生JS实现 addClass removeClass hasClass JS实现为动态添加的元素增加事件 js查找页面中alert弹窗位置 JS实现Jquery的addClass,removeClass,changeClass,toggleClass HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换 JavaScript如何转换二进制数据显示成图片 Uint8Array转成可用的imgurl es6数组快速删除指定元素 支付宝小程序与微信小程序的不同点对比 JS数组按数字的大小排序 js对象数组按照对象属性排序
回到顶部