【js】js前端技巧之图片格式转换(File、Blob、base64):

这篇具有很好参考价值的文章主要介绍了【js】js前端技巧之图片格式转换(File、Blob、base64):。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、类型简介

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

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

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

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

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

二、BLOB 与 File:
【1】BLOB 转 File
const file = new File([blob], fileName, { type: fileType, lastModified: Date.now() });
【2】File 转 BLOB
const blob = URL.createObjectURL(file);
三、 BLOB 与 base64:
【1】BLOB(url) 转 base64
const image = new Image();
image.src = imgBlob;
image.onload = () => {
  // 构建canvas节点
  const canvas = document.createElement('canvas');
  canvas.width = image.width;
  canvas.height = image.height;
  const context = canvas.getContext('2d');
  context.drawImage(image, 0, 0, image.width, image.height);
  // 转换
  const imgBase64 = canvas.toDataURL();
  console.log(imgBase64);
};
【2】base64 转 BLOB
// 分割base64
const temp = base64Data.split(','); 
// 获取类型
const mime = arr[0].match(/:(.*?);/)[1];
// 解码使用 base-64 编码的字符串
const raw = window.atob(temp[1]);
const rawLength = raw.length;
// base64文件数据读取
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; i += 1) {
  uInt8Array[i] = raw.charCodeAt(i);
}
const blob = new Blob([uInt8Array], { type: mime });
四、File 与 base64:
【1】File 转 base64
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
  // e.target.result 即为base64结果
  console.log(e.target.result);
};
【2】base64 转 File
// 分割base64
const arr = base64Data.split(','); 
// 获取类型
const mime = arr[0].match(/:(.*?);/)[1];
// 解析base字符串
const bstr = atob(arr[1]); 
const n = bstr.length; 
// base64文件数据读取
const u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
const file =  new File([u8arr], filename, { type: mime });
五、案例:

js将file转换为blob,JavaScript,前端,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-732951.html

// 获取图片file转base64
fileToBase64(file) {
   return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () { imgResult = reader.result }
        reader.onerror = function (error) { reject(error) }
        reader.onloadend = function () { resolve(imgResult) }
    })
},

到了这里,关于【js】js前端技巧之图片格式转换(File、Blob、base64):的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html2canvas生成图片地址Base64格式转成blob在转成file(二进制)可正常发送(保姆教程,复制粘贴可用)

    开始:                                                  最终结果:                                                      1. html2canvas方法生成的图片地址已Base64编码形式放在img标签src中可直接展示生成的图片(注意 页面标签获取位置 ,还有个 setTimeout 页面渲染需要

    2024年02月13日
    浏览(49)
  • 将图片转换成Base64格式存入数据库以及在前端页面展示

    这个示例接口假设已经有了一个数据库连接池,并且已经注入或初始化了数据源。这个接口的功能是读取指定路径的图片文件,将其转换为Base64编码字符串,然后将其存入数据库中。可以通过调用 saveImageToDB 方法来实现这个功能。调用该方法时需要传入要存储的图片文件的路

    2024年02月16日
    浏览(50)
  • js实现base64,url,blob之间的相互转换

    一般来说前端展示图片会通过三种方式: url、base64、blob 1.url: 一般来说,图片的显示还是建议使用url的方式比较好。 2.base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图

    2023年04月27日
    浏览(52)
  • js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式:

    2024年02月03日
    浏览(50)
  • js:File和Base64(DataURL)互相转换

    使用 使用 在线示例:https://mouday.github.io/front-end-demo/base64-file/base64-file.html 参考 js 把base64转file文件的两种方式 JS实现将文件和base64的相互转换

    2024年02月15日
    浏览(40)
  • js里base64与file之间的转换

    在 js中,可以使用 Blob 对象将 base64 字符串转换为 File 对象。 方法一、base64 直接转换为 File 对象: 首先, 需要从 base64 字符串中获取文件类型, 然后将文件类型和 base64 字符串转换为 Blob 对象。最后, 使用 Blob 对象构造函数创建一个 File 对象。 下面是一个示例函数,它接收一个

    2024年02月09日
    浏览(39)
  • 前端FileReader对象实现图片file文件转base64

    1、file转base64具体代码 2、原理解析 ​ 上面封装的方法,其原理主要是借助 FileReader 对象来实现图片格式的转换, FileReader 对象中的 readAsDataURL() 方法,可以读取一个 File 或 Blob 类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过 readAsDataURL() 方法去读

    2023年04月09日
    浏览(39)
  • Android中的图片如何转换成Base64格式

    Android手机客户端的图片数据上传到服务器中保存,首先需要将客户端的图片转换成Base64格式,然后才能通过网络上传到服务器中。 让客户端将图片上传到服务器,将图片的网络URL告诉服务器 将图片转成Base64编码,传递给服务器,服务器将Base64字符串解码之后生成一张图片。

    2023年04月27日
    浏览(40)
  • 前端 base64与图片相互转换

    base64转图片 如下图:(后端返回的数据) base64转换图片文件 图片(url)转换base64 便捷的图片转化base64 利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

    2024年02月12日
    浏览(52)
  • 将html字符串中的base64图片转换成file并上传

    目的 解决富文本编辑器中复制粘贴的图片 base64 字符串过长导致无法存储到数据库的问题 思路 通过正则 获取html字符串中里面的所有图片 base64 数组 然后每个图片base64 转成file 使用上传文件的函数 上传到服务器上. 将上传后获取到的图片访问url 替换成 数据里面的 img 的 src

    2024年01月23日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包