有时候我们要转换图片为base64,或者将base64转回图片,可能都需要找一些在线工具或者软件类型的工具才行。
当然 chrome 也算是软件,但是好在做前端的都有 chrome。
好了,来看下简单的例子,我随便截了个桌面背景当例子。

分别保存为 png, jpg 两种。

然后用 chrome 打开图片,接着按 F12 打开控制台,在 Sources 或 Resources 都行。

看到了吧,在最后一个箭头处就是我们要的 base64 数据了,非常简单。
当然这里没有data头,用的时候再加上即可。

data:image/jpg;base64,这里加上刚才的base64数据。

当然 image/jpg 是图片类型,如果你懒,全用 image/jpg 也是可以的。
如果你要强迫症,那就写对应的类型吧,比如 image/png, image/gif 什么的。

图片转换为 base64 简单吧,分分钟搞定。
当然你要把 base64 数据转为图片,也是非常简单的,
直接在地址栏打开  data:image/jpg;base64,图片base64数据  即可在浏览器上显示图片,然后右键保存图片即可。

好了,今天就分享这么个小知识点。

最新文章

  1. PHP笔记(CSS篇)
  2. 如何在linux环境下搭建github环境
  3. C#转VB.NET
  4. web项目 log4j2的路径问题
  5. Configure Amazon RDS mysql to store Chinese Characters
  6. Convert.ToDateTime(值),方法可以把一个值转化成DateTime类型。
  7. 【Beta版本】冲刺-Day7
  8. jboss eap开启https协议
  9. Eigen相关介绍
  10. Python Web 应用:WSGI基础
  11. Hibernate使用原生sql语句
  12. html5有什么布局标签
  13. Import larger wordpress xml file
  14. windows下adb+flash_image刷机
  15. JavaScript中的闭包理解
  16. 深入理解Hadoop集群和网络
  17. css以及选择器基础
  18. 聊天机器人(基于android)
  19. kali使用
  20. Oracle Applications DBA 基础(一)

热门文章

  1. Mvc4_@Styles.Render提高性能
  2. 深入浅出etcd系列 – 心跳和选举
  3. python图像处理 模式转化简单总结
  4. UE4中Timeline的使用
  5. CentOS7安装OpenStack(Rocky版)-02.安装Keyston认证服务组件(控制节点)
  6. Bootstrap 样式设计 栅格系统
  7. 11.10 Daily Scrum
  8. Daily Scrum 12.22
  9. (第三周)c#程序理解
  10. ElasticSearch 2 (26) - 语言处理系列之打字或拼写错误