JavaScript中Blob的具体实现

2024-11-2 22:45| 发布者: 284cc| 查看: 84| 评论: 0

摘要: 目录利用场景相关API注意事项创建 Blob对象预览图片示例常用于处理惩罚文件数据、图像数据、音频数据等。Blob对象通常用于在客户端处理惩罚文件，如上传文件、下载文件、处理惩罚图像等操作。Blob对象可以通过Blob构

常用于处理惩罚文件数据、图像数据、音频数据等。Blob对象通常用于在客户端处理惩罚文件，如上传文件、下载文件、处理惩罚图像等操作。Blob对象可以通过Blob构造函数创建，也可以通过其他方式获取，比如从File对象中获取。

利用场景

文件上传：将用户选择的文件转换为Blob对象，然后通过Ajax哀求将Blob对象发送到服务器。
文件下载：将服务器返回的文件数据转换为Blob对象，然后通过URL.createObjectURL()生成下载链接，供用户下载。
图片处理惩罚：将图片文件转换为Blob对象，然后可以举行压缩、裁剪等操作。
音频视频处理惩罚：处理惩罚音频、视频文件时，也可以利用Blob对象来操作二进制数据。

创建 Blob对象

[code]var blob = new Blob(["Hello World!"],{type:"text/plain"}); console.log(blob); /* Blob {size: 12, type: "text/plain"} */ [/code]

预览图片

拿到了一个Blob对象，该对象对应一个图片，可以利用下面的方式预览：

[code]cropper.getCroppedCanvas().toBlob(function(img) { var image2 = document.getElementById('avatar2'); image2.src=URL.createObjectURL(img); }); [/code]

img 是个图片Blob对象
avatar2 是个 html img 元素

示例

[code]<!DOCTYPE html> <html lang="zh" > <head> <meta charset="utf-8"> </head> <body class="white-bg"> <a id="id1" href="#" rel="external nofollow" >blob</a> <script type="text/javascript"> var blob = new Blob(["Hello World!"],{type:"text/plain"}); var id1Element = document.getElementById("id1"); id1Element.href = URL.createObjectURL(blob); </script> </body> </html> [/code]

在这里插入图片描述