Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >JS 将 base64编码的图片转化为图片文件【未测试】

JS 将 base64编码的图片转化为图片文件【未测试】

作者头像
双面人
发布于 2019-07-12 06:00:49
发布于 2019-07-12 06:00:49
5.3K00
代码可运行
举报
文章被收录于专栏:热爱IT热爱IT
运行总次数:0
代码可运行

需求:将string 类型的base64编码图片转化成File类型的图片文件,用于文件上传

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function dataURLtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}
var base64Img = 'data:image/bmp;base64,LASDJFLKAJDFLKASDJFL...' // base64编码的图片
var imgFile = dataURLtoFile(base64Img); // 这样就会转成一个 图片文件了。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
高拍仪SDK(文豆FastSnap)
本sdk主要适用于bs(web)架构,可支持谷歌Chrome、火狐Firefox、360极速和安全、Edge、IE10+等支持html5的多种浏览器。
用户11057749
2024/04/30
5960
base64转file文件源码记录
我们前后端交互图片的时候,一般我们是用base64进行交互的,但是很多时候我们传递图片的时候很多的后端是需要file文件格式的,而不是base64的,所以这个时候是需要进行一个简单的转变
何处锦绣不灰堆
2020/05/28
1.8K0
js项目中常用的一些工具函数
记录一下在项目中常用的工具函数,随时更新 var utils = { /** * 获取路径参数方法 返回参数值 * @name 参数名字 * */ getQueryString: function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); // window.location.search 获取url问号后面部分 v
别盯着我的名字看
2022/06/09
5800
混合开发 图片上传 base64转file的坑
但是在手机上传确实失败的 ,经过分析发现 手机上base64转 file 生成的file对象和pc版的不同 。
lilugirl
2019/05/28
3K0
js 图片转换base64 base64转换为file对象
相关: https://www.cnblogs.com/fps2tao/p/9268380.html
全栈程序员站长
2022/07/21
9.6K1
自己动手用electron+vue开发博客园文章编辑器客户端【二】
在nwjs里,宿主页面与做过特殊标记的iframe页面(nwdisable nwfaketop和nwUserAgent)通信,并没有什么特别的地方
liulun
2019/05/25
2.4K0
图片转换js (img对象,file对象,base64,canvas对象),以及图片压缩方式(转载)
首先想一想我们有哪些需求?大多时候我们需要将一个File对象压缩之后再变为File对象传入到远程图片服务器;有时候我们也需要将一个base64字符串压缩之后再变为base64字符串传入到远程数据库;有时候后它还有可能是一块canvas画布,或者是一个Image对象,或者直接就是一个图片的url地址,我们需要将它们压缩上传到远程;
李维亮
2021/07/08
4.9K0
面试官昨天问我对base64的理解,着实被问懵了
我们知道一个字节可表示的范围是 0 ~ 255(十六进制:0x00 ~ 0xFF), 其中 ASCII 值的范围为 0 ~ 127(十六进制:0x00 ~ 0x7F);而超过 ASCII 范围的 128~255(十六进制:0x80 ~ 0xFF)之间的值是不可见字符。
用户3806669
2021/03/25
4.7K0
面试官昨天问我对base64的理解,着实被问懵了
简单的说一下人脸识别的过程及前端实现
最近写项目的时候在做一个登录的操作,但是我们因为是多端的,有小程序,有PC,后期可能还有公众号等,所以我们的登录是很多种不同的登录方式的,有最基本的账号密码登录,有微信扫码登录,有工号刷卡登录,有手机验证码登录,当然还有逼格比较高的人脸识别登录,手机验证码登录其实是一个很简单的,所以我可能会在后期写一下处理的过程,今天我们大概说一下人脸识别的一个过程,当然因我不是写后端的,所以这里是不能贴后端的源码的,但是前端的处理还是可以写一下的。
何处锦绣不灰堆
2020/05/29
1.5K0
开发中常用的JS知识点集锦
1、对象的深拷贝(一级属性拷贝和多级属性嵌套拷贝) //深拷贝函数(满足属性多级嵌套) function deepCloneObj(sourceObj){ var obj = (sourceO
tandaxia
2018/11/21
5230
vue.js + axios.js图片压缩处理并上传到服务器demo
点击查看效果 图片压缩原理 将图片重新画入一个canvas中。可设置最大宽度,再按图片宽高比例定义canvas画布的宽高。 完整代码demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="widt
别盯着我的名字看
2022/06/09
5.6K0
图片裁切上传插件cropper的使用
图片上传格式一般是文件格式和base64格式,比较方便的是图片格式,后台可以方便的处理上传的图片。
tianyawhl
2019/11/04
2.1K0
base64图片压缩并转换二进制流
base64 压缩 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; newImage.src = base64.url; newImage.setAttribute('crossOrigin', 'Anonymous'); var imgWidth, imgHeight; newImage.onload = function() { imgWid
我乃小神神
2021/12/07
1.9K0
使用Vue封装一个实用的人脸识别组件
由于我们的电脑有的有摄像头,有的没有摄像头,所以我们需要根据不同的场景来封装这个组件。先放个图吧,大家可以看得更加直观一些。
Vam的金豆之路
2021/11/30
3.5K1
使用Vue封装一个实用的人脸识别组件
原生JS调取PC端摄像头源码记录
今天简单的记录一个JS调取摄像头的源码,不是很难,只是为了以后可以直接拿来使用,好的废话不多说,看源码!
何处锦绣不灰堆
2020/05/28
1.9K0
base64与二进制互转,保存内容,文件读写:Blob/FileReader/URL/FormData
html5开发常用的对象有:FileReader  FormData File URL  Blob createObjectURL Uint8Array等,这些在日常开发中,需要做图片转base64,base64转而二进制文件,页面截图让用户下载。
周陆军博客
2023/05/07
3K0
当前端遇见了强制横屏签字的需求...
在前一阶段的工作中,突然接到了这个需求:_手写签批的页面在移动端竖屏时强制页面横屏展示进行签字_,一开始我觉着只要将页面使用 CSS3 的 transform 进行 rotate 一下就可以了,但是当我尝试后发现并不是像我想象的那样简单。
winty
2023/12/11
5960
当前端遇见了强制横屏签字的需求...
cropperjs图片裁剪及数据提交文件流互相转换详解
cropperjs的主要功能是图片裁剪,是一款前端常用的的图片裁剪工具,可根据相关api配置裁剪出符合自己业务需要的图片,具体使用如下:
超级小可爱
2023/12/21
4780
开发实例:后端Java和前端vue实现图片管理功能
2. 通过input[type=file]元素上传图片,使用element-ui的Upload组件进行封装。
用户1289394
2024/01/19
6980
开发实例:后端Java和前端vue实现图片管理功能
基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储
网上找了点教程,结合之前框架里就有的修改了一下,没做细节优化处理 demo 16:9的尺寸,自己可以修改 步骤: npm install vue-cropper 组件内使用 import { Vue
〆 千寻、
2020/03/11
4.5K0
推荐阅读
相关推荐
高拍仪SDK(文豆FastSnap)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验