[HTML5] Blob对象_blob撖寡情html_风神修罗使的博客

`Blob` 对象

一直以来， JS 都没有比较好的可以直接处理二进制的方法。而 Blob 的存在，允许我们可以通过 JS 直接操作二进制数据。
一个 Blob 对象就是一个包含有只读原始数据的类文件对象。 Blob 对象中的数据并不一定得是 JavaScript 中的原生形式。 File 接口基于 Blob ，继承了 Blob 的功能,并且扩展支持了用户计算机上的本地文件。
Blob 对象可以看做是存放二进制数据的容器，此外还可以通过 Blob 设置二进制数据的MIME类型。
创建 `Blob`

通过构造函数
var blob = new Blob(dataArr:Array<any>, opt:{type:string});
dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView，Blob，或者 DOMString对象。
opt：对象，用于设置Blob对象的属性（如：MIME类型） 
1、创建一个装填DOMString对象的Blob对象
 
 2、创建一个装填ArrayBuffer对象的Blob对象
 
 3、创建一个装填ArrayBufferView对象的Blob对象（ArrayBufferView可基于ArrayBuffer创建，返回值是一个类数组。如下：创建一个8字节的ArrayBuffer，在其上创建一个每个数组元素为2字节的“视图”）
  
通过Blob.slice()
 
此方法返回一个新的Blob对象，包含了原Blob对象中指定范围内的数据 
Blob.slice(start:number, end:number, contentType:string)
start：开始索引，默认为0
end：截取结束索引（不包括end）
contentType：新Blob的MIME类型，默认为空字符串
  
通过canvas.toBlob()
 
var canvas = document.getElementById("canvas");
canvas.toBlob(function(blob){
    console.log(blob);
});
前面提到，File接口基于Blob，继承了Blob的功能并进行了扩展，故我们可以像使用Blob一样使用File对象。 
通过Blob.slice方法，可以将大文件分片，轮循向后台提交各文件片段，即可实现文件的分片上传。
 分片上传逻辑如下： 
获取要上传文件的File对象，根据chunk（每片大小）对文件进行分片
通过post方法轮循上传每片文件，其中url中拼接querystring用于描述当前上传的文件信息；post body中存放本次要上传的二进制数据片段
接口每次返回offset，用于执行下次上传 
下面是分片上传的简单实现： 
initUpload();
//初始化上传
function initUpload() {
    var chunk = 100 * 1024;   //每片大小
    var input = document.getElementById("file");    //input file
    input.onchange = function (e) {
        var file = this.files[0];
        var query = {};
        var chunks = [];
        if (!!file) {
            var start = 0;
            //文件分片
            for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
                var end = start + chunk;
                chunks[i] = file.slice(start , end);
                start = end;
            // 采用post方法上传文件
            // url query上拼接以下参数，用于记录上传偏移
            // post body中存放本次要上传的二进制数据
            query = {
                fileSize: file.size,
                dataSize: chunk,
                nextOffset: 0
            upload(chunks, query, successPerUpload);
// 执行上传
function upload(chunks, query, cb) {
    var queryStr = Object.getOwnPropertyNames(query).map(key => {
        return key + "=" + query[key];
    }).join("&");
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "http://xxxx/opload?" + queryStr);
    xhr.overrideMimeType("application/octet-stream");
    //获取post body中二进制数据
    var index = Math.floor(query.nextOffset / query.dataSize);
    getFileBinary(chunks[index], function (binary) {
        if (xhr.sendAsBinary) {
            xhr.sendAsBinary(binary);
        } else {
            xhr.send(binary);
    });
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var resp = JSON.parse(xhr.responseText);
                // 接口返回nextoffset
                // resp = {
                //     isFinish:false,
                //     offset:100*1024
                if (typeof cb === "function") {
                    cb.call(this, resp, chunks, query)
// 每片上传成功后执行
function successPerUpload(resp, chunks, query) {
    if (resp.isFinish === true) {
        alert("上传成功");
    } else {
        //未上传完毕
        query.offset = resp.offset;
        upload(chunks, query, successPerUpload);
// 获取文件二进制数据
function getFileBinary(file, cb) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        if (typeof cb === "function") {
            cb.call(this, this.result);
以上是文件分片上传前端的简单实现，当然，此功能还可以更加完善，如后台需要对合并后的文件大小进行校验；或者前端加密文件，全部上传完毕后后端解密校验等，此处不做赘述。 
通过url下载文件
 
window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件
 实现如下： 
createDownload("download.txt","download file");
function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.innerHTML = fileName;
    link.download = fileName;
    link.href = URL.createObjectURL(blob);
    document.getElementsByTagName("body")[0].appendChild(link);
执行后页面上会生成此Blob对象的地址，点击后可下载：
 
 查看下载结果：
  
通过url显示图片
 
我们知道，img的src属性及background的url属性，都可以通过接收图片的网络地址或base64来显示图片，同样的，我们也可以把图片转化为Blob对象，生成URL（URL.createObjectURL(blob)），来显示图片。
  
本文主要介绍了Blob对象的属性和使用场景，其实我们可以看到，Blob对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器，而真正的业务功能则需要通过FileReader、URL、Canvas等对象实现，之后会继续对这些对象的功能和应用场景进行归纳。
                    写在前面本篇主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。Blob对象一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持...
前端下载的关键靠<a href="demo.jpg" download>下载图片</a>
后端传blob，前端处理blob，然后下载文件
二进制数组arrayBuffer、typedArray、dataView相关内容
blob、file相关内容
上传图片预览的两种方式：blobURL和dataURL
下载的关键----a的download属性
想要实现点...
　　Blob是计算机界通用术语之一，全称写作：BLOB(binary large object)，表示二进制大对象。MySql/Oracle数据库中，就有一种Blob类型，专门存放二进制数据。在javascript中，Blob通常表示二进制数据，不过它们不一定非得是大量数据，Blob也可以表示一个小型文本文件的内容。本文将详细介绍Blob
Blob(array[, ...
Blob表示二进制类型的大对象，在数据库管理系统中，将二进制数据存储为一个单一个体的集合。
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。
创建Blob
通过构造函数：
var blob = new Blob(dataArr:Array<any
Blob基本用法
Blob对象
Blob对象指的是字节序列，并且具有size属性，是字节序列中的字节总数，和一个type属性，它是小写的ASCII编码的字符串表示的媒体类型字节序列。
size:以字节数返回字节序列的大小。获取时，符合要求...
浏览器由于安全性要求，不允许JS直接获取主机的文件系统上的文件，只能通过HTML标签input[type=file]来由用户选择可以被浏览器操作的文件。
那么input[type=file]标签选择的文件，会被如何保存呢？
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
				原理：此效果实现的核心原理是：创建&lt;iframe&gt;元素；将CSS，HTML字符串转换为Blob对象；使用URL.createObjectURL()方法将Blob对象转换为URL对象并赋予我们创建的&lt;iframe&gt;元素的src属性；使用JavaScript代码表示更加一目了然：// 1. 创建&lt;iframe&gt;元素
var iframe = document.cre...
blob是什么：blob是描述图像中局部区域的平均像素强度的特征。而图像中局部的平均像素强度具有尺度不变性。blob特征画在图像上就是个圆。
blob特征有什么性质：具备光强强度、旋转不变性，但是不具备尺度和仿射不变性。
blob检测的大概流程：用不同尺度的拉普拉斯核（需要归一化），对原图上每个像素点做卷积，如果某个结果有邻域内最大值，则这个像素点位置，就有个.
var eleAppend = document.getElementById("forAppend");
window.URL = window.URL || window.webkitURL;
if (typeof history.pushState...
自从html5 file api出现以来，我们可以做的事情越来越多，越来越有趣了，之前介绍过 《HTML5实现断点续传》、《HTML5实现拖拽下载》等关于File API的一些实例，今天和大家分享一下，如何用HTML5 file api读取文件的MD5码。
MD5码在文件的唯一性识别上有很重要的应用，业内常用MD5进行文件识别、文件秒传、文件安全性检查等。
废话不多说，直接说重点。
1. 将 Blob 图像转换为字节数组（byte array）
使用 Java 中的 `Blob` 类获取 Blob 图像数据，然后使用 `Blob.getBytes()` 方法将其转换为字节数组。
示例代码：
```java
Blob blob = resultSet.getBlob("image_blob");
byte[] imageBytes = blob.getBytes(1, (int) blob.length());
2. 将字节数组编码为 Base64 字符串
将字节数组转换为 Base64 编码的字符串，以便在 JSON 中传递。
示例代码：
```java
String base64EncodedImage = Base64.getEncoder().encodeToString(imageBytes);
3. 创建包含 Base64 字符串的 JSON 响应
将 Base64 编码的字符串添加到 JSON 对象中，并将其作为响应发送到前端。
示例代码：
```java
JSONObject response = new JSONObject();
response.put("image", base64EncodedImage);
return ResponseEntity.ok(response.toString());
在前端中，您可以使用 JavaScript 将 Base64 字符串转换回图像，并将其显示在 HTML 中。示例代码如下：
```javascript
const imageElement = document.createElement('img');
imageElement.src = 'data:image/png;base64,' + base64EncodedImage;
document.body.appendChild(imageElement);