首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

响应中的Blob()显示的不是原始图像url,而是大小和类型

响应中的Blob()显示的不是原始图像URL,而是大小和类型。

Blob(Binary Large Object)是一种数据类型,用于存储大量的二进制数据。在前端开发中,Blob对象通常用于处理文件或图像数据。

当使用Blob()方法创建一个Blob对象时,它会返回一个包含数据的Blob实例。这个Blob实例可以包含任何类型的数据,包括图像数据。然而,Blob对象本身并不是一个URL,它只是一个数据容器。

要在前端页面中显示图像,我们通常需要将Blob对象转换为URL。这可以通过使用URL.createObjectURL()方法来实现。该方法会创建一个临时的URL,用于在浏览器中显示Blob对象的内容。

以下是处理Blob对象的一般步骤:

  1. 从服务器获取图像数据,并将其存储在Blob对象中。
  2. 使用URL.createObjectURL()方法将Blob对象转换为URL。
  3. 将URL赋值给img标签的src属性,以在页面上显示图像。

示例代码如下:

代码语言:txt
复制
// 从服务器获取图像数据
fetch('image.jpg')
  .then(response => response.blob())
  .then(blob => {
    // 将Blob对象转换为URL
    const imageUrl = URL.createObjectURL(blob);
    
    // 在页面上显示图像
    const img = document.createElement('img');
    img.src = imageUrl;
    document.body.appendChild(img);
  });

这样,通过将Blob对象转换为URL,我们可以在页面上显示原始图像。

在腾讯云的云计算平台中,您可以使用腾讯云对象存储(COS)服务来存储和管理大量的二进制数据,包括图像数据。腾讯云对象存储(COS)是一种高可用、高可靠、低成本的云存储服务,适用于各种场景,如网站托管、备份和存档、大数据分析等。

您可以通过以下链接了解更多关于腾讯云对象存储(COS)的信息和产品介绍:

腾讯云对象存储(COS)产品介绍:https://cloud.tencent.com/product/cos

腾讯云对象存储(COS)开发者文档:https://cloud.tencent.com/document/product/436

请注意,以上答案仅供参考,具体的实现方式和推荐产品可能因实际需求和情况而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JSBuffer数据详解

Typed Array去获取及处理音频数据、XHR2上传或下载二进制内容等等 arrayBuffer ArrayBuffer表示二进制数据原始缓冲区,该缓冲区用于存储各种类型化数组数据。...也就是说他是一个二进制数据原始缓冲区,虽然 JavaScript 是弱类型语言,但是他本身是对数据类型大小都有限制,我们需要通过某种数据结构将缓冲区内容有序读取出来或写进去 例如: Int8Array...() readAsText() 各种类型 上节课,我们讲过在火狐下拖拽元素需要用setData函数设置键值对,同时用getData函数可以获取keyvalue值,那么IE定义了 texturl 这两种有效数据类型...第一个参数是一个包含实际数据数组 第二个参数是数据类型 这两个参数都不是必需 var arr = ["hello", "world"] var Blob = new Blob(arr, { "type...,另一方面img标签则会找到相应内存地址,直接读取数据并将图像显示到页面

6.4K30

万字长文带你学习【前端开发二进制数据】| 技术创作特训营第五期

Blob(Binary Large Object)用于存储不可变原始数据,而 File 对象是 Blob 一种特殊形式,它包含了与文件相关额外元数据,比如文件名、文件大小等信息。...Blob File 关系:Blob 是基础:Blob 是一种表示不可变原始二进制数据对象,它可以包含任意类型数据。...// 使用 Blob 创建 URL显示在页面上const blobUrl = URL.createObjectURL(blob);// 使用 File 创建 URL显示在页面上const fileUrl...他们关系如下图所示,TypedArrayDataView都是Arraybuffer视图,可以通过这两个数据类型去操作原始二进制数据。...ImageData 对象 data 属性是一个 Uint8ClampedArray,它包含了图像像素数据。在这个例子,我们首先获取了原始图像像素数据 data。

35431

【Web技术】774- 基于canvas完成图片裁剪工具

(globalCompositeOperation表示如何将一个源(新图像绘制到目标(已有)图像上。)...不过,我这里没有采用scale,而是手动修改图片缩放比例,然后重新得到scaleImgWidthscaleImgHeight,在去调用drawImage。...效果图: 实时显示截选图片 如果仅仅是去截选canvas目前显示部分,是不太友好。应该是对应到原始图片相应位置,去截选这个位置图片才是比较友好。...处理思路: 新创建一个canvas,将img完整绘画在上面,并且完成旋转问题 通过选中框x y w h值,还有img width/heightcanvas width/height值,得到对应原始图片截选部分...putImageData放入canvas 通过toBlob获取到blob 最后通过window.URL.createObjectURL获取到DOMString export const getPhotoData

1.2K20

cropperjs图片裁剪及数据提交文件流互相转换详解

modal: true,// 在图像上方裁剪框下方显示黑色模态 rotatable: true,// 启用以旋转图像 scalable: true, // 启用以缩放图像 zoomable..., hasSameSize): Function, // url 图片地址, hasSameSize:Boolean,如果新图像与旧图像大小相同,则不会重建裁剪器,只会更新所有相关图像 URL。...2: 限制最小画布大小以适合容器。如果画布容器比例不同,最小画布将被其中一个维度额外空间包围。 3: 限制最小画布大小以填充容器。...如果画布容器比例不同,容器将无法在其中一个维度容纳整个画布。定义裁剪器视图模式。 如果将viewMode设置为0,裁剪框可以延伸到画布之外,而值为1、2或3将裁剪框限制为画布大小。...(或原始数据缓冲区)内容,可以读取 Blob File 数据。

24010

你不知道 Blob

在数据库管理系统,将二进制数据存储为一个单一个体集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript Blob 类型对象表示不可变类似文件对象原始数据。...1.Blob URL/Object URL Blob URL/Object URL 是一种伪协议,允许 Blob File 对象用作图像,下载二进制数据链接等 URL 源。...使用字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 斜杠 /,共 64 个字符,等号 = 用来作为后缀用途。 下面我们来介绍如何在 HTML 嵌入 base64 编码图片。...你不能直接操纵 ArrayBuffer 内容,而是需要创建一个类型化数组对象或 DataView 对象,该对象以特定格式表示缓冲区,并使用该对象读取写入缓冲区内容。...Blob 类型对象表示不可变类似文件对象原始数据。Blob 表示不一定是 JavaScript 原生格式数据。

4K20

在浏览器中使用tensorflow.js进行人脸识别的JavaScript API

网络返回每张面孔边界框与相应分数,即显示面孔每个边界框概率。这些分数用于筛选边界区域,因为图像可能根本不包含任何面孔。注意,即使只有一个人要检索边界框,人脸检测也应该执行。...链接: https://github.com/justadudewhohacks/faceapi.js/tree/master/weights 原始模型相比,已经量化了模型权重,模型文件大小减少了75%...也可以手动获取人脸位置特征。github repo上有这样示例。 注意,边界特征与原始图像/媒体大小相关。...如果显示图像大小原始图像大小不一致,可以调整它们大小: const resized = fullFaceDescriptions.map(fd => fd.forSize(width, height...,我们将得到一些分别显示一个人图像,并计算人脸描述符。

2.6K30

DOMString、Document、FormData、Blob、File、ArrayBuffer (转)

五、家臣之Blob数据对象 一个Blob对象就是一个包含有只读原始数据类文件对象。Blob对象数据并不一定得是JavaScript原生形式。...我们查看demo页面这个mm图片元素,会发现其URL地址既不是传统HTTP,也不是Base64 URL而是Blob形式~如下截图示意: 这就是Blob在Web开发中非常重要一个功能——创建Blob...)方法代替)Blob.size[只读]Blob对象包含数据字节大小Blob.type[只读]一个字符串,表明该Blob对象所包含数据MIME类型。...类型化数组 类型化数组(Typed Arrays)是JavaScript中新出现一个概念,专为访问原始二进制数据而生。...DataView对象 DataView对象在可以在ArrayBuffer任何位置读取写入不同类型二进制数据。

2.7K30

手把手教你前端本地文件操作与上传

: 它是一个window.File实例,包含了文件修改时间、文件名、文件大小、文件mime类型等。...如果需要限制上传文件大小就可以通过判断size属性有没有超,单位是字节,而要判断是否为图片文件就可以通过type类型是否以image开头。通过判断文件名后缀可能会不准,而通过这种判断会比较准。...}); 上面代码把blob打印出来是这样: 能得到它大小类型,但是具体内容也是不可见,它有一个slice方法,可用于切割大文件。...,除了上面提到img之外,另外一个很常见是video标签,如youtobe视频就是使用blob: 这种数据不是直接在本地而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video...可以借助一个iframe,原理是默认form表单提交会刷新页面,或者跳到target指定那个url,但是如果把ifrmaetarget指向一个iframe,那么刷新就是iframe,返回结果也会显示

1.8K110

前端本地文件操作与上传

它是一个window.File实例,包含了文件修改时间、文件名、文件大小、文件mime类型等。...能得到它大小类型,但是具体内容也是不可见,它有一个slice方法,可用于切割大文件。...读取,这是一个新API,经常Service Worker配套使用,因为SW里面常常要解析url。...这种数据不是直接在本地而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video里面,它也是通过URLAPI创建: let mediaSource = new MediaSource...可以借助一个iframe,原理是默认form表单提交会刷新页面,或者跳到target指定那个url,但是如果把ifrmaetarget指向一个iframe,那么刷新就是iframe,返回结果也会显示

1.5K20

【笔记】618- 读《你不知道 Blob》笔记

在 JavaScript Blob 对象表示一个不可变、原始数据类文件对象,它不一定非得是大量数据,也可以表示一个小型文件内容。...属性方法 2.1 属性介绍 Blob 对象拥有 2 个属性: size :只读,表示 Blob 对象中所包含数据大小(以字节为单位); type :只读,值为字符串,表示该 Blob 对象所包含数据...Blob JavaScript类型化数组是一种类似数组对象,并提供了一种用于 访问原始二进制数据机制 。...Blob 类型对象表示不可变类似文件对象原始数据。Blob 表示不一定是 JavaScript 原生格式数据。...URL不是所有浏览器都支持通过 XMLHttpRequest 获取源数据

3.3K40

Blob、File、ArrayBuffer、TypedArray、DataView究竟应该如何应用

你不能直接操作 ArrayBuffer 内容,而是要通过类型数组对象或 DataView 对象来操作,它们会将缓冲区数据表示为特定格式,并通过这些格式来读写缓冲区内容。...关于 TypedArray 具体实现,它存在以下方式: 类型单个元素值范围大小(bytes)描述Web IDL 类型C 语言中等价类型Int8Array-128 到 12718 位二进制有符号整数...Object URL 概念 大多数情况下,我们可以看到一些网页内部可以看到一些诸如此类 Blob Url: 我们可以看到视频标签 vide src 属性正式一个 Blob 类型 Url。...关于 Blob URL/Object URL 其实它们是一种伪协议,允许将 Blob File 对象用作图像、二进制数据下载链接等 URL 源。...同时这些 URL 只能在浏览器单个实例同一会话(即页面/文档生命周期)本地使用,这意味者离开当前浏览器实例这个 URL 就会失效。

1.8K50

深入理解xhrresponseTypeblobarrayBuffer

videoEle.src = url.createObjectURL(blob); }; } }; 上面代码处理一般xhr请求足够满足,即返回类型为DOMString...当时就被这货坑了一下,以为返回数据能够够Blob构造函数接收,并正确显示Blob对象 Blob也是比较有意思,mdn上解释是Blob对象表示不可变类似文件对象原始数据。...options 是一个可选BlobPropertyBag字典,它可能会指定如下两个属性: type,默认值为 “”,它代表了将会被放入到blob数组内容MIME类型。...,其他类型获取响应实体用xhr.response。...后续 项目中video都存储在移动设备,如果都放在blob,会造成内存大量占用,因是cordovawebapp形式,故采用插件cordova-plugin-file, 相关写文件代码如下

2.9K40

浏览器之性能指标-LCP

---- 浏览器级图片懒加载 根据权威结构[1]数据,图像是大多数网站最常请求资源类型,并且通常占用比其他任何资源更多带宽。在90%分位点上,网站在桌面移动设备上发送图像超过5MB。...通常情况下,它会是一个图像或文本块。LCP还会因页面环境而异,因为LCP元素基于视口展示。 对于LCP来说,真正技巧在于「测量特定元素加载所需时间」(而不是页面本身)。...❝触发LCP记录元素包括: 图像元素(包括SVG元素内图像) 视频元素 使用url()函数加载「背景图像元素 块级元素内文本节点 ❞ 被视为最大元素定义取决于其类型。...原始尺寸 - 指原始图像尺寸。 ❝图像报告是其最小元素尺寸。这意味着压缩图像将报告其可见尺寸,而放大图像将报告其原始尺寸。 ❞ ---- 3....如果阻塞渲染URL存在非关键代码,可以将其保留在URL,并使用async或defer属性标记该URL

1.1K30

文件下载,搞懂这9种场景就够了

Blob 通常是影像、声音或多媒体文件。在 JavaScript Blob 类型对象表示一个不可变、原始数据类文件对象。...Blob 对象由一个可选字符串 type(通常是 MIME 类型 blobParts 组成: 在 JavaScript 你可以通过 Blob 构造函数来创建 Blob 对象,Blob 构造函数语法如下...1.2 了解 Blob URL Blob URL/Object URL 是一种伪协议,允许 Blob File 对象用作图像、下载二进制数据链接等 URL 源。...它允许引用 、 Blob,但如果你访问 Blob URL 不再存在,则会从浏览器收到 404 错误。 上述 Blob URL 看似很不错,但实际上它也有副作用。...此外,该属性作用是表明链接资源将被下载,而不是显示在浏览器

3K10

【Web技术】1528- 来自大厂前端页面截图方案

下面介绍图片资源转 Blob 方案,保证图片地址来自本地,避免在快照转化时加载失败情况。这里提到 Blob 对象表示一个不可变、代表二进制原始数据类文件对象,在特定使用场景会使用到。...css background 方式显示。...因为 background-size 并不会反馈一个具体宽高数值,而是通过枚举值如 contain、cover 等代表图片缩放类型;相对于标签, background 方式最终生成图片会较为模糊...在具体操作,创建由 devicePixelRatio 放大图像,然后使用 css 将其缩小相同倍数,有效地提高绘制到 canvas 图像清晰度表现。...为实际显示宽高 2 倍值,通过transform: scale(0.5)实现了元素大小缩放,transform-origin根据实际情况设置。

2.4K33

5个方法对于重量级网站图片优化

不,我不是在谈论使用CSS或在HTML调整大小。我正在谈论调整服务器上图像大小,然后将其发送给浏览器。 例如,对于要在电子商务网站上列出产品,你有4000x3000像素图像。...在将原始图像发送到浏览器之前,请确保将原始图像缩小到这些尺寸。调整大小图像原始图像小得多,并且加载速度比原始图像快得多。 XYZ Product Detail <!...如果你有桌面移动设备响应式网站,则可以切换到使用响应图像。...使用响应图像标签,使用img标签srcsetsizes属性,你可以为浏览器提供单个图像变体列表以及不同屏幕上相对图像大小定义。...ImageKit为你提供基于URLDPR参数以及调整大小裁剪参数,还支持客户端提示,这使得使用响应图像非常容易,并可以跨设备提供完美的图像

1.6K20

高质量前端快照方案:来自页面的「自拍」

下面介绍图片资源转 Blob 方案,保证图片地址来自本地,避免在快照转化时加载失败情况。这里提到 Blob 对象表示一个不可变、代表二进制原始数据类文件对象,在特定使用场景会使用到。...css background 方式显示。...因为 background-size 并不会反馈一个具体宽高数值,而是通过枚举值如 contain、cover 等代表图片缩放类型;相对于标签, background 方式最终生成图片会较为模糊...在具体操作,创建由 devicePixelRatio 放大图像,然后使用 css 将其缩小相同倍数,有效地提高绘制到 canvas 图像清晰度表现。...为实际显示宽高 2 倍值,通过transform: scale(0.5)实现了元素大小缩放,transform-origin根据实际情况设置。

2.5K40

让浏览器下载文件一些手段

download是 HTML5 标签新增一个属性,此属性会强制触发下载操作,指示浏览器下载 URL不是导航到它,并提示用户将其保存为本地文件,例如: <a href="result.png...首先本不该将download设为true,download与disabled这种<em>类型</em><em>的</em>属性值不同,它与文件名直接相关联。而且对于这种前后端<em>响应</em>式下载<em>的</em>方式,download 属性并<em>不是</em>必要<em>的</em>。 2....<em>Blob</em>: <em>URL</em> 关于download属性还有介绍: 尽管 HTTP <em>URL</em> 需要位于同一源<em>中</em>,但是可以使用 <em>blob</em>: <em>URL</em> <em>和</em> data: <em>URL</em> ,以方便用户下载使用 JavaScript 生成<em>的</em>内容...<em>Blob</em> <em>URL</em> / Object <em>URL</em>是一种伪协议,可以让<em>Blob</em><em>和</em>File对象用作<em>图像</em><em>和</em>二进制数据下载链接等<em>URL</em>源。...浏览器在内部通过<em>URL</em>.createObjectURL()创建一个对 <em>Blob</em> 或 File 对象<em>的</em>特殊引用,生成<em>的</em> <em>Blob</em> <em>URL</em> 只能在浏览器本地<em>的</em>单个实例<em>和</em>同一会话中使用,并且这个 <em>URL</em> 对象会在页面退出<em>的</em>时候被浏览器释放

9.1K20

Blob

在数据库管理系统,将二进制数据存储为一个单一个体集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript Blob 类型对象表示不可变类似文件对象原始数据。...(只读):表示 Blob 对象中所包含数据大小(以字节为单位)。...1.Blob URL/Object URL Blob URL/Object URL 是一种伪协议,允许 Blob File 对象用作图像,下载二进制数据链接等 URL 源。...使用字符包括大小写拉丁字母各 26 个、数字 10 个、加号 + 斜杠 /,共 64 个字符,等号 = 用来作为后缀用途。 下面我们来介绍如何在 HTML 嵌入 base64 编码图片。...> mediatype 是个 MIME 类型字符串,例如 "image/jpeg" 表示 JPEG 图像文件。

6.1K40
领券