精华内容
下载资源
问答
  • BLOB

    千次阅读 2018-06-06 14:10:16
    Blob是计算机界通用术语之一,全称写作:BLOB(binary large object),表示二进制大对象。MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据。在javascript中,Blob通常表示二进制数据,不过它们不一定...

    Blob是计算机界通用术语之一,全称写作:BLOB(binary large object),表示二进制大对象。MySql/Oracle数据库中,就有一种Blob类型,专门存放二进制数据。在javascript中,Blob通常表示二进制数据,不过它们不一定非得是大量数据,Blob也可以表示一个小型文本文件的内容。本文将详细介绍Blob

     

    构造函数

    Blob(array[, options])

      Blob()构造函数返回一个新的Blob对象,blob的内容由参数数组中给出的值的串联组成

      [注意]IE9-浏览器不支持

      参数array是一个由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的Array,或者其他类似对象的混合体,它将会被放进Blob

      参数options是一个可选项,它可能会指定如下两种属性:

      1、类型,默认值为"",它代表了将会被放入到blob中的数组内容的MIME类型

      2、结束符,默认值为"transparent",它代表包含行结束符\n的字符串如何被输出。它是以下两个值中的一个:"native",代表行结束符会被更改为适合宿主操作系统文件系统的惯例,或者"transparent",代表会保持blob中保存的结束符不变

    var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; 
    var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); 
    console.log(oMyBlob);//Blob {size: 32, type: "text/html"}

     

    属性和方法

      Blob是不透明的,能对它们进行直接操作的就只有获取它们的大小(以字节为单位)、MIME类型以及将它们分割成更小的Blob

      Blob.size(只读):返回Blob对象中所包含数据的大小(字节)

      Blob.type(只读):一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串

    var myBlob = new Blob([1,2,3],{type:'text/plain'});
    console.log(myBlob);//Blob {size: 3, type: "text/plain"}
    console.log(myBlob.size);//3
    console.log(myBlob.type);//'text/plain'

    Blob.slice([start[, end[, contentType]]])

      slice()方法返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据

    var subblob = blob.slice(0,1024, "text/plain");//Blob中前1KB视为文本
    var last = blob.slice(blob.size-1024, 1024);//Blob中最后1KB视为无类型

      Web浏览器可以将Blob存储到内存中或者磁盘上,Blob可以表示非常大的数据块(比如视频文件),如果事先不用slice()方法将它们分割成为小数据块的话,无法存储在主内存中。正是因为Blob可以表示非常大的数据块,并且它可能需要磁盘的访问权限,所以使用它们的API是异步的(在Worker线程中有提供相应的同步版本)

     

    文件作为Blob

      在使用Blob之前,首先必须要获取Blob。其中一种方式就是把文件作为Blob

      <input type="file">元素最初是用于在HTML表单中实现文件上传的。浏览器总是很小心地实现该元素,目的是为了只允许上传用户显式选择的文件。脚本是无法将该元素的value属性设置成一个文件名的,这样它们就无法实现将用户电脑上任意的文件进行上传。现在,浏览器已经对该元素进行了扩展,允许客户端可以访问用户选择的文件了
      [注意]允许客户端脚本读取选择的文件内容不会引发安全问题,它和允许这些文件上传到服务器的安全级别是一样的

      在支持本地文件访问的浏览器中,<input type="file">元素上的files属性则是一个FileList对象。该对象是一个类数组对象,其元素要么是0,要么是用户选择的多个File对象。一个File对象就是一个Blob,除此之外,还多了name和lastModifiedDate属性

    复制代码
    <script>
    //输出选中的文件列表相关的信息
    function fileinfo(files) {
        for(var i = 0; i < files.length; i++) {//files是一个类数组对象
            var f = files[i];
            //a.txt 86 text/plain Mon Sep 19 2016 11:07:43 GMT+0800 (中国标准时间)
            console.log(f.name,    //只是名字:没有路径
                        f.size, f.type,    //size和type是Blob的属性
                        f.lastModifiedDate);    //修改时间
        }
    }
    </script>
    <input type="file"  οnchange="fileinfo(this.files)"/> 
    复制代码

     

    下载Blob

      在实际Web应用中,Blob更多是图片二进制形式的上传与下载,虽然其可以实现几乎任意文件的二进制传输

      第二种获取Blob的形式是通过XHR下载Blob

    复制代码
    var xhr = new XMLHttpRequest();    //创建一个新的XHR对象 
    xhr.open('GET','p5.gif');            //指定要获取内容的URL
    xhr.responseType = 'blob';        //以Blob的形式
    xhr.onload = function(){         //onload 比onreadystatechange更容易
        //Blob {size: 944, type: "image/gif"} 
        console.log(xhr.response);  //response返回的就是Blob对象    
    }                                
    xhr.send(null);                    //发送请求
    复制代码

     

    Blob URL

      前面介绍了如何获取或者创建Blob。下面来介绍如何对获取或者创建的Blob进行操作。其中最简单的就是可以创建一个URL来指向该Blob。随后,可以以一般的URL形式在任何地方使用该URL:在D0M中、在样式表中、甚至可以作为XMLHttpRequest的目标

    【createObjectURL()】

      使用createObjectURL()函数可以创建一个Blob URL。URL.createObjectURL()静态方法会创建一个DOMString,它的URL表示参数中的对象。这个URL的生命周期和创建它的窗口中的document绑定。这个新的URL对象表示着指定的File对象或者Blob对象

    objectURL = URL.createObjectURL(blob);

      传递一个Blob给createObjectURL()方法会返回一个URL(以普通字符串形式)。该URL以blob://开始,紧跟着是一小串文本字符串,该字符串用不透明的唯一标识符来标识Blob

    复制代码
    var xhr = new XMLHttpRequest();     
    xhr.open('GET','test/p5.gif');    
    xhr.responseType = 'blob';    
    xhr.onload = function(){ 
        //blob:http://127.0.0.1/539ae798-70db-44db-b216-fc932b358285
        console.log(URL.createObjectURL(xhr.response));
    }    
    xhr.send(null);
    复制代码

      [注意]blob://URL和data://URL是不同的,data://URL会对内容进行编码。blob://URL只是对浏览器存储在内存中或者磁盘上的Blob的一个简单引用

    【file URL】

      blob://URL和file://URL也是不同的,file://URL直接指向本地文件系统中的一个文件,仅暴露了文件的路径、浏览目录的许可等,除此之外任何内容都会带来安全问题的

      Blob URL和创建它们的脚本拥有同样的源。这使得它们比file://URL更加灵活,由于file://URL是非同源的,因此要在Web应用中使用它们相对比较麻烦。Blob://URL只有在同源的文档中才是有效的。比如,如果将一个Blob URL通过postMessage()传递给一个非同源窗口,则该URL对于该窗口来说是没有任何意义的

      Blob URL并不是永久有效的。一旦用户关闭了或者离开了包含创建Blob URL脚本的文 档,该Blob URL就失效了。比如,将Blob URL保存到本地存储器中,然后当用户开始一个新的Web应用会话的时再使用它,是不可能的

    【URL.revokeObjectURL()】

      URL.revokeObjectURL()静态方法用来释放一个之前通过调用URL.createObjectURL() 创建的已经存在的URL对象。当结束使用某个URL对象时,应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了

    window.URL.revokeObjectURL(objectURL);

      参数objectURL是一个DOMString,表示通过调用URL.createObjectURL()方法产生的URL对象

      之所以提供这样的方式,是因为这和内存管理问题有关。一旦使用之后,Blob就不再需要了,应当回收它。但是,如果Web浏览器正维护创建的Blob和Blob URL之间的映射关系,那么即使该Blob已经不用了,也不会被回收。javascript解释器无法跟踪字符串的使用情况,如果URL仍然是有效的,那么它只能认为该URL可能还在用。这就意味着,在手动撤销该URL之前,是不会将其回收的.

    转自:https://www.cnblogs.com/xiaohuochai/p/6535130.html

    展开全文
  • Blob

    万次阅读 2016-01-01 15:00:28
    Blob(Binary Large Object)术语最初来自数据库,早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob。  在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不...

        Blob(Binary Large Object)术语最初来自数据库,早期数据库因为要存储声音、图片、以及可执行程序等二进制数据对象所以给该类对象取名为Blob
        在Web领域,Blob被定义为包含只读数据的类文件对象。Blob中的数据不一定是js原生数据形式。常见的File接口就继承自Blob,并扩展它用于支持用户系统的本地文件。

        构建一个Blob对象通常有三种方式:1、通过Blob对象的构造函数来构建。2、从已有的Blob对象调用slice接口切出一个新的Blob对象。3、canvas API toBlob方法,把当前绘制信息转为一个Blob对象。下面分别看看3种方式的实现:


    构造函数:
    var blob = new Blob(array[optional], options[optional]);

    array(可选): 一个数组。数组元素可以是:ArrayBufferArrayBufferViewBlobDOMString.或者他们的组合。
    options(可选): 一个对象。用于指定Blob对象的属性,可选的参数有:
    type: Content-Type,用于指定将要放入Blob中的数据的类型(MIME)。


    Blob对象的基本属性:

    size : Blob对象包含的字节数。(只读)
    type : Blob对象包含的数据类型MIME,如果类型未知则返回空字符串。


    Blob对象的基本方法:
    Blob.slice([start, [end, [content-type]]])

    slice方法与数组的slice类似。


    原生对象构建Blob

    
    <script type="text/javascript">
    window.onload = function() {
        var blob = new Blob(1234);
    }
    </script>
    

    提示出错:

    Uncaught TypeError: Failed to construct ‘Blob’: The 1st argument is neither an array, nor does it have indexed properties.

    原因在于Blob构造函数要求第一个参数必须是数组,而这里第一个参数既不是一个数组,也没有可索引的属性。既然这里提到了对象的可索引属性,让我联想到了类数组的概念,而Arguments就是一个很好的例子。来试一试:

    <script type="text/javascript">
    function testArgumentsBlob() {
        var blob = new Blob(arguments);
        console.log(blob.size);//3
        console.log(blob.type);//""
    }
    window.onload = function() {
        testArgumentsBlob(1, 2, 3);
    }
    </script>
    

    可以看到即使是类数组对象,而数组元素类型是Number也能得出正确的结论,猜想大概是由于构造函数内部把Number转化为String的缘故吧!

    再来试一试其他的参数类型:

    window.onload = function() {
      var arg = {hello: "2016"};
      var blob = new Blob([JSON.stringify(arg, null, "\t")], {type: "application/json"});
      console.log(blob.type);//application/json
      console.log(blob.size);//20
    }

    blob.type等于application/json没问题。arg转为字符串后的长度为16加上制表符\t的宽度4个字节等于20。


    slice切出一个Blob对象

    window.onload = function() {
        var arg = {hello: "2016"};
        var str = JSON.stringify(arg, null, "\t");
        var blob = new Blob([str], {type: "application/json"});
        var blob2 = blob.slice();
    
        console.log(blob2.size);//20
        console.log(blob2.type);//""
    }

    可以看到,原始的Blob对象的type属性并不能传递给新的Blob对象,所以还是要自己指定。

    window.onload = function() {
        var arg = {hello: "2016"};
        var str = JSON.stringify(arg, null, "\t");
        var blob = new Blob([str], {type: "application/json"});
        var blob2 = blob.slice(0, blob.size, "application/json");
        console.log(blob2.size);//20
        console.log(blob2.type);//application/json
    }

    canvas toBlob接口

    函数原型:

    void canvas.toBlob(callback, type, encoderOptions);

    • callback: 一个回调函数,新建的blob对象是唯一的参数`
    • type: 图片格式,默认为image/png,默认dpi: 96
    • encoderOptions: 0~1之间的数值。当type为image/jpeg 或 image/webp的时候,用于指定图片质量

    来个DEMO:

    window.onload = function() {
        var canvas = document.getElementById("main");
        canvas.toBlob(function(blob) {
            var img = document.createElement("img");         
            var url = URL.createObjectURL(blob);
            img.onload = function() {
                URL.revokeObjectURL(url);
            }
            img.src = url;
            document.body.appendChild(img);
        });
    }
    </script>

    得出错误:

    Uncaught TypeError: canvas.toBlob is not a function.

    一开始觉得自己写错了,Google了下才发现Chrome居然不支持这个接口。给个polyfillCanvas toBlob


    Blob基本运用

    知道了Blob对象的基本属性,以及构建的方法,来看几个具体的运用。


    利用Blob显示对象`

    
    var blob = new Blob([1, 2, 3]);
    var src = URL.createObjectURL(blob);
    console.log(src);//blob:http%3A//localhost%3A8003/a47ea163-c253-471a-9d9e-877fe345b60f
    var img = document.createElement('img');
    img.onload = function() {
        URL.invokeObjectURL(img.src);
    }
    img.src = src;
    document.body.appendChild(img);
    

    由于blob对象不是一个有效的文件,所以不能正常显示图片。上面的demo提到了一个URL.createObjectURL接口,顺便来学习以下:

    objectURL = URL.createObjectURL(blob);

    主要用于根据一个Blob对象(或者File,因为File继承自Blob),创建一个URL用于表示该对象。需要注意的是即使对同一个对象调用两次也会得到不同的URL。如果该URL不用了需要调用URL.invokeObjectURL来进行释放。浏览器会在当前document unloaded的时候自动把该URL释放。URL格式:

    blob:http%3A//localhost%3A8003/a47ea163-c253-471a-9d9e-877fe345b60f

    最后来看一个正常点的DEMO,利用URL.createObjectURL读取本地图片文件,并创建缩略图。


    利用Blob显示缩略图`

     var input = document.createElement("input");
     input.type = "file";
     input.accept = "image/*";
     input.multiple = true;
     input.style.display = "none";
     document.body.appendChild(input);
    
     var fileSelect = document.createElement("a");
     fileSelect.href = "#";
     fileSelect.appendChild(document.createTextNode("Choose files"));
     document.body.appendChild(fileSelect);
    
     var imgList = document.createElement("div");
     imgList.innerHTML = "<p>No file Selected!</p>"
     document.body.appendChild(imgList);
    
     input.addEventListener("change", function(e) {
     var files = this.files;
     if(!files.length) {
        return;
     }
     imgList.innerHTML = "";
     var list = document.createElement("ul");
     imgList.appendChild(list);
     for(var i = 0; i < files.length; i++) {
         var li = document.createElement("li"); 
         list.appendChild(li);
    
         var img = document.createElement("img");
         img.src = window.URL.createObjectURL(files[i]);
         img.height = 60;
         img.width  = 60;
         img.onload = function() {
             window.URL.revokeObjectURL(this.src);
         }
         li.appendChild(img);
         var info = document.createElement("span");
         info.innerHTML = files[i].name + ":" + files[i].size + " bytes";
         li.appendChild(info);
      }
    }, false);
    
    fileSelect.addEventListener("click", function(e) {
      input.click();     
           e.preventDefault();
    }, false);
    

    由于File对象继承自Blob,所以我们可以很方便的利用File对象加载本地系统图片文件,并通过createObjectURL生成一个URL并加以显示。

    参考文献:
    + Blob
    + Using_files_from_web

    展开全文
  • 查看mysql blob字段的内容

    万次阅读 2019-07-17 10:01:12
    使用Navicat 12 for mysql查看blob字段的内容。注意要根据blob字段的类型选择对应的查看方式,常见的有文本,图像两种方式,否则会出现乱码。

    使用Navicat 12 for mysql查看blob字段的内容。注意要根据blob字段的类型选择对应的查看方式,常见的有文本,图像两种方式,否则会出现乱码。
    在这里插入图片描述

    展开全文
  • Blob类型介绍以及查看

    2020-06-11 13:45:28
    最近看到一个字段的类型是Blob有点懵逼,从Navigate上看只能看到一个“Blob”,实际你去仔细看的话,分线字段大小不为空,而且每个大小不一样,说明该字段不仅不为空而且还有值且不一样。 那这个Blob是什么呢?大名...

    最近看到一个字段的类型是Blob有点懵逼,从Navigate上看只能看到一个“Blob”,实际你去仔细看的话,分线字段大小不为空,而且每个大小不一样,说明该字段不仅不为空而且还有值且不一样。
    在这里插入图片描述
    那这个Blob是什么呢?大名叫做binary large objectet 二进制大对象。它可以是一个图片一段声音也可以是一段文字,那怎么看它的值呢,我们可以根据不同状况来看。

    如果是图片的话直接通过工具,比如navigate查看图片的方式来看
    在这里插入图片描述
    如果没有卡而已上一栏查看那里找到图片选项

    如果是文字的话可以通过工具,也用navigate举例子点击“查看” —》再点击“原始数据模式”,把对号勾上如果是文字的话就会显示出来。

    展开全文
  • Navicat 查看BLOB类型字段内容

    万次阅读 2019-02-22 10:43:34
    直接双击是看不到图像的(和plsql不同) 选择blob字段的内容, 点击“备注”,选择图像
  • blob-blob-game-源码

    2021-03-13 07:09:17
    blob-blob-game
  • Navicat for MySQL 查看BLOB字段内容

    千次阅读 2019-01-08 16:29:05
    Navicat for MySQL 查看BLOB字段内容查看BLOB内容的两种方法:   1. 在查询窗口中选中BLOB字段,点击备注   2. 查看-》原始数据模式  
  • navicat for oracle 中查看blob字段

    千次阅读 2019-02-21 11:19:42
    在navicat中查看oralce数据库中的blob字段内容很简单。 第一步:双击打开想要查看的表 第二步:如下图,在blob字段上 右击---&gt;保存数据---&gt;选择或新建一个本地文件--&gt;保存。 第三步:...
  • 查看mysql BLOB类型数据

    2020-07-01 12:14:16
    BLOB (binary large object),二进制大对象 以换行符分割: GROUP_CONCAT( a.cost SEPARATOR ‘\n’)
  • MySQL怎么查看BLOB内容

    千次阅读 2020-11-17 15:20:49
    下文讲述mysql数据库将blob,longblob类型转换为字符串的方法分享,如下所示 实现思路: 使用convert关键字即可实现其需求,如下例所示: select CONVERT(value USING utf8mb4) AS dataConvertValue from tableName; ...
  • navicat查看mysql blob类型数据

    千次阅读 2019-09-07 16:35:22
    1.先把目标数据查询出来 2.然后选中想看的数据 3.有个备注按钮,选下备注,即可看到 不少文章,上来就让看备注,mmp,不查询出来,是没有备注这个按钮的。 ...
  • oracle Blob

    2012-10-18 19:13:04
    oracle blob 類型使用,及性能問題
  • 第一步:双击表,并将鼠标点击在对应的BLOB字段上。如下图的标号1的位置。 第二步:点击View中的你的BLOB数据对应的存储的格式,我的是json的,所以直接点击Text,如果你的存储的是图片,你可以点击Image,或者你...
  • BLOB是一个大文件,典型的BLOB是一张图片或一个声音文件,由于它们的尺寸,必须使用特殊的方式来处理(例如:上传、下载或者存放到一个数据库)。根据Eric Raymond的说法,处理BLOB的主要思想就是让文件处理器(如...
  • Blob.js-master Blob js 插件,有时候IE不支持Blob,需要我们自己下载Blob插件,有需要小伙伴可以下载
  • blob分析、halcon 特征提取分析检测
  • 使用Blob

    千次阅读 2012-01-31 13:00:39
    基于FIBPlus组件在InterBase/Firebird 客户端应用程序中使用BLOB字段 2006年7月作者Sergey Vostrikov和Serge Buzadzhy 引言 BLOB字段可以在数据库中存储非结构数据,如图像,OLE对象,声音等,我们将阐述BLOB字段如何...
  • Blob用途

    千次阅读 2018-12-20 14:01:06
    ** new Blob([data])用来创建URL的file对象或者blob对象** 关于下载在页面直接写url地址也是可以下载的, window.location.href=“text.pdf”; 但后端接口有的时候要求传给我们前端的是文件流格式,前端处理方式...
  • spring blob

    2009-03-04 16:09:45
    spring blobspring blobspring blobspring blobspring blobspring blob
  • Blob

    2014-06-16 22:11:28
    一个Blob对象就是一个包含有只读原始数据的类文件对象.Blob对象中的数据并不一定得是JavaScript中的原生形式.File接口基于Blob,继承了Blob的功能,并且扩展支持了用户计算机上的本地文件.
  • Blob分析

    千次阅读 2018-09-27 00:31:52
    * Blob分析 * 常用方法是对图像进行二值化+形态学+特征选择。并不是所有的都用到这三个,也可以只有其中两个 * 他的用法是非常灵活的 * 描述:通过Blob分析获取瓶盖 open_framegrabber ('DirectShow', 1, 1, 0, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 296,141
精华内容 118,456
关键字:

blob查看