木灵鱼儿
阅读:1796
base64转file文件方法
使用canvas操作内容后,如果想保存图片之类的操作,就无可避免的要处理这一步,因为canvas导出的是base64格式的文件,如果你只做预览还好,存储的话,就要想办法了。
我的想法是转成上传文件的那种file格式。
方法如下:
/**
* @description: 将base64转换为文件对象
* @param {*} dataUrl base64
* @param {*} fileName 文件名
* @Date: 2021-06-30 14:33:47
* @Author: mulingyuer
*/
export function dataURLtoFile(dataUrl, fileName) {
const arr = dataUrl.split(";base64,"); //[data:image/png,xxx]
const mime = arr[0].replace("data:", ""); //mime后端识别用的文件格式数据
const fileType = mime.split("/").pop(); //获取文件格式
const bstr = atob(arr[1]); //base64解码
//创建Unicode编码的数组对象,每个值都是Unicode
const u8arr = new Uint8Array(bstr.split("").map(str => str.charCodeAt(0)));
return new File([u8arr], `${fileName ?? "file"}.${fileType}`, { type: mime });
}
步骤:
- 截取base64文本,已";base64,"为分割,可以拿到
[data:image/png,xxx]
内容数据,下标0可以获取到文件mime信息,下标1则是base64内容 - 通过下标0获取到mime
- 通过mime获取到文件格式(文件名要用)
- 通过window下的atob方法对base64解码
- 创建一个Uint8Array数组,内容是解码出来后每一个字符的Unicode编码
- 创建File文件,第一个是数组,传入Uint8Array,第二个是文件名,第三个是配置信息,其中type设置mime信息。
除了new File你也可以创建blob
对象
把new File替换一下
new Blob([u8arr],{ type: mime });
完成。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
为什么length不准
前言这个问题在最近经常被刷到,虽然我知道怎么解决这个问题,但是为什么会这样,其实并不太明白,所以这次特此开一篇文章讲讲为什么length获取字符位数会不准的问题,以及我们的解决办法。"𠮷".length //2 "💩".length //2𠮷与吉利的吉是一个意思,𠮷是异体写法,古文中会出现。按照我们的认知,上述的length输出应该是1才对,但事实上却是2。计算机是如何存储字符的早期的ASCII字符集在计算机中,所有的数据存储最终都是二进制,如何正确的存储及其识别字符,做法就是定制一个编码规则,让每个字符都由一个个数字来表示,这些数字被...

Promise失败重试,可指定重试次数
//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...
animation 动画的三个事件
const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次,适用用多次动画 }); div.addEventListener("animationend", function() { //...
手写Promise
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug!!! */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
深度合并对象的方法
找了很久,现有的库有两个:1. Mergenpm地址: Merge用法:import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === obj1)...
利用JSON过滤对象和数组中指定的key属性
有时候我们在vue中进行for循环,就会涉及到绑定唯一值key的问题,但是并不是任何时候都会存在所谓的唯一值,使用index下标明显是不合适的,官方也不推荐,除非你for循环出来的列表不用变化。所以一般常用的做法就是给for循环的对象添加一个属性,属性的值是随机的uuid或者时间戳。这样前端问题解决了,如果遍历的数据还需要提交到后端,那么不就多了一个属性,这个属性后端不需要的。所以,我们需要在提交数据前,对数据进行过滤。过滤又得for循环删除?那怎么行,有没有那种通用的,简单的方法。过滤方法/** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 * @para...
Copy 一个复制操作的类
前言js有一个31k多的star的开源复制库:clipboard.js;但是一些简单复制并不想安装一个库来解决,所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分,通过toString()方法可以获取被选中的文本内容,以及js操作选中。MDN文档:SelectionexecCommand 对象用于以命令的形式来操作网页的内容,说白了就是用它来实现复制文本操作,复制的是选中的文本MDN文档:execCommand 需要注意的是,execCommand在未来将会被遗弃,因为这个api本身是从ie浏览器那边继承的,久而久之各大浏览器都对其做了兼容,虽然...
对象扁平化
前言后端返回给前端的数据,有时候会是一个多层级对象,但是我们前端使用的时候,for循环遍历渲染时,多层级对象往往需要进行单独处理,因为还需要判断这个key值是否存在,否则会报错。强行让后端改变数据结构又好像不现实,无奈,只有自己处理了。掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》感觉很合适,逻辑清晰。要求将对象中的层级扁平化,改成如下格式:// 实现一个 flatten 函数,实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; // 转换为 l...