位置: IT常识 - 正文

图片格式转换(File、Blob、base64)(图片格式转换pdf)

编辑:rootadmin
图片格式转换(File、Blob、base64) 前言

推荐整理分享图片格式转换(File、Blob、base64)(图片格式转换pdf),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:图片格式转换jpeg,图片格式转换器免费版下载,图片格式转换pdf免费,图片格式转换器,图片格式转换器,图片格式转换免费软件,图片格式转换免费软件,图片格式转换器,内容如对您有帮助,希望把文章链接给更多的朋友!

记录一下比较常见的图片格式(File、Blob、base64)在不同的场景他们之间的相互转换的方法。

一、类型简介Blob

BLOB(binary large object): 二进制大对象,是一个可以存储二进制文件的容器。 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。

属性名称读/写描述size只读Blob 对象中所包含数据的大小(字节)。type只读一个字符串,表明该Blob对象所包含数据的MIME类型。如果类型未知,则该值为空字符串。例如 “image/png”图片格式转换(File、Blob、base64)(图片格式转换pdf)

我们在浏览器中输出的Blob对象:

File

File 对象通常是用户在网页中的一个 元素上传文件返回的 FileList 对象,或者是拖放操作返回的 DataTransfer 对象,也可以在浏览器中的控制台中自己创建。

属性名称读/写描述name只读返回文件的名称.由于安全原因,返回的值并不包含文件路径 。type只读返回 File 对象所表示文件的媒体类型(MIME)。例如 PNG 图像是 “image/png”.lastModified只读number, 返回所引用文件最后修改日期,自 1970年1月1日0:00 以来的毫秒数。lastModifiedDate只读Date, 返回当前文件的最后修改日期,如果无法获取到文件的最后修改日期,则使用当前日期来替代。size只读File 对象中所包含数据的大小(字节)webkitRelativePath只读返回 File 相关的 path 或 URL。

我们在浏览器中输出的File: 可以看到它的属性有和Blob一样的地方,只是在Blob的基础上做了扩展

base64

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。编码规则:把3个字节变成4个字节;每76个字符加一个换行符;最后的结束符也要处理。

看一个Base64格式的图片了解一下: 可以看到,Base64格式的图片以data开头,后面跟着图片类型和图片的基本数据

二、类型转换1、BLOB 与 FileFile 转 BLOB// 获取文件对象const _file = $("#file")[0].files[0];fileToBlob(){const type = file.type;const reader = new FileReader();reader.readAsDataURL(file)reader.onload = function(e) { const blob = new Blob([e.target.result], {type}); console.log("blob:", blob); const file = blobToFile(blob, 'fileName'); console.log('file', file);};}BLOB 转 FileblobToFile(blob, fileName){const file = new File([blob], fileName, {type: blob.type}); return file;}2、Blob 与 base64Blob转 base64blobToBase64(blob){const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = (e) => { const base64 = e.target.result console.log("base64", base64);}}base64 转 Blobbase64ToBlob(base64) {// 分割base64let arr = base64.split(',');// 获取类型let mime = arr[0].match(/:(.*?);/)[1] || type;// 去掉url的头,并转化为bytelet bytes = window.atob(arr[1]);let n = new ArrayBuffer(bytes.length);let u8arr = new Uint8Array(n);while (n--) { u8arr[n] = bytes.charCodeAt(n);}return new Blob([u8arr], {type: mime});},3、File 与 base64File 与 base64// 获取文件对象const file = $("#file")[0].files[0];fileToBase64(file){const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) { // e.target.result 即为base64结果 console.log(e.target.result);};}base64 转 Filebase64ToFile(base64,filename) {// 分割base64let arr = base64.split(',');// 获取类型let mime = arr[0].match(/:(.*?);/)[1] || type;// 去掉url的头,并转化为bytelet bytes = window.atob(arr[1]);let n = new ArrayBuffer(bytes.length);let u8arr = new Uint8Array(n);while (n--) { u8arr[n] = bytes.charCodeAt(n);}return new File([u8arr],filename,{ type: mime });},4、arrayBuffer 与 base64base64转arrayBufferbase64ToUint8Array(base64String) {const padding = '='.repeat((4 - base64String.length % 4) % 4);const base64 = (base64String + padding) .replace(/\-/g, '+') .replace(/_/g, '/');const rawData = window.atob(base64);const outputArray = new Uint8Array(rawData.length);for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i);}return outputArray;}arrayBuffer转base64arrayBufferToBase64( buffer ) {var binary= '';var bytes = new Uint8Array( buffer );var len = bytes.byteLength;for (var i = 0; i < len; i++) { binary += String.fromCharCode( bytes[ i ] );}return window.btoa( binary );// 简写(一行代码)return window.btoa(String.fromCharCode(...new Uint8Array(buffer)))}三、扩展file转bufferconst buffer = fileReader.readAsArrayBuffer(file)file转binary(二进制格式)const buffer = fileReader.readAsBinaryString(file)file转file(用于修改file的只读属性name、type、lastModified)const newFile = new File([file], 'newName.wav', {type: 'audio/wav', lastModified: Date.now()})blob转blobUrlconst blob = '.....'window.URL = window.URL || window.webkitURL;const blobURL = window.URL.createObjectURL(blob);base64操作const arr = base64.split(',')const type = arr[0].match(/:(.*?);/)[1] // image/jpegconst size = window.atob(arr[1]).lengthbase加解密 -- 不支持中文场景:由于一些网络通讯协议的限制,必须对原数据进行编码后才可发送,后端得到后再解码得到原数据,例如,发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。base转码const base64 = window.btoa('a')base解码const string = window.atob(base64)

参考链接: ArrayBuffer转base64详解:https://juejin.cn/post/6844904088811880455 JavaScript(ES6) - ArrayBuffer: https://www.jianshu.com/p/5a841d6d7cc3

本文链接地址:https://www.jiuchutong.com/zhishi/298323.html 转载请保留说明!

上一篇:浅谈 JSON 对象和 FormData 相互转换,打通前端与后端的通信血脉(json与对象的区别)

下一篇:使用 JavaScript 创建一个兔年春节倒数计时器(javascript创建对象及应用)

  • 减免税额和免税额一样吗
  • 税务申报退税
  • 国内税和国外税
  • 销售货物应税劳务服务清单给客户一份是不是就可以了
  • 经营活动产生的净现金流量计算公式
  • 员工继续教育培训费计什么科
  • 减半征收附加税会计分录
  • 境外公司委托境内公司付款
  • 还有预算外资金的说法吗
  • 子女教育专项附加扣除是什么意思
  • 计提高温补贴会计分录
  • 三证合一 更新
  • 费用退回怎么做账
  • 产品成本核算的一般程序
  • 附加税没有计提会计分录
  • 税控盘登不上怎么回事
  • 报销车费怎么贴
  • 员工有多处收入怎么申报个人所得税
  • 个体工商户公转私用途写什么
  • 网速突然减慢
  • 高新技术企业研究开发费用加计扣除
  • 存货丢失取得赔偿
  • macbook怎么设置输入法
  • 全网最详细的破解卡密软件教程[2021首发]
  • win11系统怎么投屏
  • dc.exe 病毒
  • removed.exe - removed是什么进程 有什么用
  • 借款业务包括以下哪些形式
  • 深入php:面向对象、模式与实践
  • 纳税人销售免税货物
  • 长期股权投资追加投资
  • 存货核算方法可以变更吗
  • 一二级公路增值税税率
  • php培训得花多少钱
  • 登录页面的实现方式
  • 特斯拉 ai day
  • php微信公众号获取带参二维码
  • 帝国cms移动端
  • 财务报表年报和汇算清缴的顺序
  • 新准则印花税计提会计分录
  • js 自定义类型
  • 学电脑哪个网站比较好
  • 织梦图片要放哪里
  • 折扣折让的会计分录
  • 当master down掉后,pt-heartbeat不断重试会导致内存缓慢增长的原因及解决办法
  • 在建工程账务怎么会转到预收账款
  • 非居民企业的所得一律适用20%的企业所得税税率
  • 汇算清缴费用调减
  • 对外公司
  • 分配现金股利如何做会计分录长投
  • 跨年的施工项目成本
  • 期末贷方余额什么意思
  • 股东之间股权转让的税务处理
  • 常用的加速折旧方法
  • 年报上的从业人数是什么意思
  • 幼儿园报税的基础是什么
  • 财务负责人和办税员可以是一个吗
  • 企业注销其他应付款怎么处理账务
  • 原材料暂估的账务处理
  • 发票开多了如何做凭证?
  • Windows7/2008中批量删除隧道适配器的方法
  • win7如何给电脑硬盘加密
  • 巧妙设置Vista任务栏和开始菜单的属性
  • 光盘做镜像文件
  • 使用u盘安装win10
  • xp系统禁用网络连接
  • xp系统如何进入桌面
  • win7如何开启蓝牙功能
  • linux清除ssh登录记录
  • Unity3D-SLua+ProtocolBuffers构建说明
  • javascript模块化规范有哪些
  • js拖拽div
  • Django中login_required装饰器的深入介绍
  • 磁盘监视器在哪
  • node怎么用
  • node.js 核心http模块,起一个服务器,返回一个页面的实例
  • js校验姓名
  • 隐藏应用名字
  • jquery field
  • 怎么查询车船税缴费记录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设