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

在此代码中,将data:image base64转换为blob

的方法如下:

代码语言:txt
复制
function dataURItoBlob(dataURI) {
  // 将base64数据部分分离出来
  var base64Data = dataURI.split(',')[1];
  
  // 将base64数据转换为字节数组
  var byteCharacters = atob(base64Data);
  
  // 创建一个存储字节的数组
  var byteArrays = [];
  for (var i = 0; i < byteCharacters.length; i++) {
    byteArrays.push(byteCharacters.charCodeAt(i));
  }
  
  // 创建blob对象
  var blob = new Blob([new Uint8Array(byteArrays)], { type: 'image/png' });
  
  return blob;
}

// 使用示例
var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'; // 这里是你的base64数据
var blob = dataURItoBlob(dataURI);
console.log(blob);

这段代码中的dataURItoBlob函数将data URI中的base64数据转换为Blob对象。首先,我们通过使用split函数将data URI字符串分割成两部分,取得base64数据部分。然后,使用atob函数将base64数据解码为字节数组。接下来,我们创建一个存储字节的数组,并将解码后的字节数组存入其中。最后,通过使用Blob构造函数,我们将字节数组转换为Blob对象,并指定其类型为'image/png'(根据实际情况进行调整)。最后,返回生成的Blob对象。

这种转换方法在前端开发中常用于将base64编码的图片数据转换为Blob对象,以便进行后续的处理,比如上传到服务器或者在浏览器中显示。在实际应用中,你可以根据具体需求进行适当的修改和调整。

腾讯云相关产品和产品介绍链接地址:

  • 对象存储(COS):腾讯云的对象存储服务,可用于存储和管理各种类型的数据,包括图片、视频、文档等。
  • 云函数(SCF):腾讯云的无服务器函数计算服务,可用于处理和转换数据,包括图片处理等。
  • 云开发(TCB):腾讯云的云开发平台,提供全栈云开发能力,包括存储、数据库、云函数等,可用于快速开发和部署应用。
  • 人工智能(AI):腾讯云的人工智能服务,包括图像识别、语音识别、自然语言处理等,可用于实现各种智能化功能。
  • 物联网(IoT):腾讯云的物联网平台,提供设备接入、数据管理、规则引擎等功能,可用于构建和管理物联网应用。
  • 区块链(BCB):腾讯云的区块链服务,提供区块链网络搭建、智能合约开发等功能,可用于构建和管理区块链应用。
  • 云原生应用平台(TKE):腾讯云的云原生应用平台,提供容器服务、容器编排等功能,可用于快速构建和部署云原生应用。

以上是腾讯云提供的一些与云计算相关的产品,可以根据具体需求选择适合的产品进行开发和部署。

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

相关·内容

前端图片压缩及上传

压缩方案 前端图片压缩的主要思路就是图片绘制到canvas,然后通过canvas的toDataURL方法来控制图片的质量,对图片进行压缩,另一方面是对图片进行宽高等比缩小来达到图片压缩的效果,下面来看一下代码示例...,我们通过new 一个Blob对象,将其转换为Blob对象,然后就可以通过url方法来将其转换为可以放到img src的链接形式了。...当压缩完成后返回的数据就是base64的数据了,我们就可以通过ajax异步来进行上传,在此我采用的是axios进行异步上传,内容及文件名作为参数传递给后台。...= imgData.replace(/^data:image\/\w+;base64,/, ""); //var size = Buffer.byteLength(base64Data,'base64...; } }); }) 接口中我们通过Buffer来base64换为buffer,进而保存到服务器本地中,本示例采用的就是图片保存到服务器本地。

2.9K20

Vue解析剪切板图片并实现发送功能

实现思路 页面挂载时监听剪切板粘贴事件 监听文件流 读取文件流的数据 创建img标签 获取到的base64码赋值到img标签的src属性 生成的img标签append到即将发送的消息容器里 监听回车事件...上传成功后,服务器返回的图片地址推送到websocket服务 客户端收到推送后,渲染页面 实现过程 本片文章主要讲解剪切板图片的解析以及base64图片转换成文件上传至服务器,下方代码的axios...完善消息发送函数,获取输入框里的所有子元素,找出base64图片将其转为文件并上传至服务器(此处需要注意:base64文件时,需要用正则表达式删掉base64图片的前缀),当前图片地址推送至websocket...图片的前缀 base64Img = base64Img.replace(/^data:image\/\w+;base64,/, "");...) { // 转换为byte let bytes = window.atob(urlData); // 处理异常,ascii码小于0的转换为大于0 let ab = new ArrayBuffer

1.4K20

JS 图片压缩

压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 的图片对象 File 图片转换成...}; }; }, // base64 图片 blob 后下载 downloadImg() { let parts = this.compressImg.split...,不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 File 对象通过 FileReader 的 readAsDataURL 方法转换为...// base64 图片 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...数据拆分后,通过 atob 方法解码 解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL(blob

25.7K21

图片压缩原理

压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 的图片对象 File 图片转换成...}; }; }, // base64 图片 blob 后下载 downloadImg() { let parts = this.compressImg.split...,不喜欢用 Vue 的也可以把代码稍微调整一下,下面开始具体分解一下代码的实现思路 Input 上传 File 处理 File 对象通过 FileReader 的 readAsDataURL 方法转换为...// base64 图片 blob 后下载 downloadImg() { let parts = this.compressImg.split(';base64,'); let contentType...数据拆分后,通过 atob 方法解码 解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL(blob

4.7K31

Blob

在数据库管理系统二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript Blob 类型的对象表示不可变的类似文件对象的原始数据。...3.4 Blob换为 Base64 URL.createObjectURL 的一个替代方法是, Blob 转换为 base64 编码的字符串。...在 MIME 格式的电子邮件base64 可以用来二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时,在传输编码方式中指定 base64。...比如嵌入一张图片: <img alt="logo" src="<em>data</em>:<em>image</em>/png;<em>base64</em>,iVBORw0KGgoAAAANSUhEUg......= imgData.replace(/^<em>data</em>:<em>image</em>\/\w+;<em>base64</em>,/, ""); let dataBuffer = Buffer.from(base64Data, 'base64

6.1K40

你不知道的 Blob

在数据库管理系统二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript Blob 类型的对象表示不可变的类似文件对象的原始数据。...3.4 Blob换为 Base64 URL.createObjectURL 的一个替代方法是, Blob换为 base64 编码的字符串。...在 MIME 格式的电子邮件base64 可以用来二进制的字节序列数据编码成 ASCII 字符序列构成的文本。使用时,在传输编码方式中指定 base64。...比如嵌入一张图片: <img alt="logo" src="<em>data</em>:<em>image</em>/png;<em>base64</em>,iVBORw0KGgoAAAANSUhEUg......= imgData.replace(/^<em>data</em>:<em>image</em>\/\w+;<em>base64</em>,/, ""); let dataBuffer = Buffer.from(base64Data, 'base64

4.1K20

base64编码图片数据存储服务器

后来查阅资料,看见一个不错的解决方式就是base64编码的图片数据转换为Blob(与File相似)并添加到form中提交。...编码转换为Blob //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同 formData.append("ImgBase64",...} }); } /** * 将以base64的图片url数据转换为Blob * @param urlData * 用url方式表示的base64图片数据 */ function...( [ab] , {type : 'image/png'}); } 最后注意的是,因为提交到后台的是Blob类型的数据,没有文件名称,需要强制重新命名名称及类型。...accessory.setUuidFileName(map.get("newFilePath")); //取出上传文件大小 accessory.setValueSize(map.get("valueSize")); //资源附件进行存储并返回附件关联代码

1.8K20

H5上传图片

压缩上传 H5 如何解决 FileReader canvas FileReader FileReader可以File对象转化成base64,这样可以优先展示图片,然后处理上传操作。...var img = new Image(); img.src = base64; img.onload = function(){ var canvas = document.createElement...使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案: server支持,单独开接口处理...base64上传 前端base64化成File对象,复用原来的server接口 这里重点讨论第2方案。...JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。基于此,只需要把base64化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。

81510
领券