有时候我们要转换图片为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数据  即可在浏览器上显示图片,然后右键保存图片即可。

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

chrome 隐藏技能之 base64 图片转换的更多相关文章

  1. Base64 图片转换工具

    以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...

  2. IOS开发---菜鸟学习之路--(十四)-将BASE64图片转换成Image

    本文基本全部都是代码 首先是.H文件 #import <Foundation/Foundation.h> @interface Base64AndImageHelp : NSObject ...

  3. Java base64 图片编码转换

    package com.test; import org.junit.Test; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...

  4. 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间

    现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...

  5. 图片转换base64数据上传,并且实现预览的简便方法

    对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...

  6. Base64图片编码原理,base64图片工具介绍,图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

  7. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  8. 运用C语言将图片转换成16进制的字符串(base64)

    最近在写手机端的性能测试脚本的时候,发现手机在上传图片数据时,先将图片转换成一堆16进制的字符,将字符传输过去,服务器再将字符解码成图片 我们在loadrunner中测试时,就需要用C语言将图片编码. ...

  9. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

随机推荐

  1. docker-compose 部署 MySql

    信息: Docker版本($ docker --version):Docker版本18.03.1-ce,版本9ee9f40 系统信息:Windows10专业版 mysql挂载在Docker的volum ...

  2. PAT甲题题解-1111. Online Map (30)-PAT甲级真题(模板题,两次Dijkstra,同时记下最短路径)

    题意:给了图,以及s和t,让你求s到t花费的最短路程.最短时间,以及输出对应的路径.   对于最短路程,如果路程一样,输出时间最少的. 对于最短时间,如果时间一样,输出节点数最少的.   如果最短路程 ...

  3. 我们的团队-IT梦想队

    IT梦想队 队长:李遇塘 队员:王长.周兴荣.朱岭杰.马婧婧 团队宣言:  一匹狼战斗力低,但一群狼的我们无所畏惧!李遇塘http://www.cnblogs.com/Liyutang/ 王 长htt ...

  4. dispatch_block_t

    通常我写一个不带参数的块回调函数是这样写的 在 . h 头文件中 定义类型 typedef void (^leftBlockAction)(); 在定义一个回调函数 -(void)leftButton ...

  5. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一)

    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(一) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (一)ubuntu18.04配置n ...

  6. Beta 冲刺 四

    团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇 照片 项目进展 岳冠宇 昨天的困难 数据交换比较复杂 ...

  7. 转Git学习碰到的问题

    [原]Git学习碰到的问题 1.通过 windows 下的 gitbash 连接 github 时 $ ssh-keygen -t rsa -C "abcd@efgh.com" / ...

  8. centos 6.9安装mysql

    1.确认mysql是否已安装,有下面的代码可知 [root@cdh1 zjl]# yum list installed mysql* Loaded plugins: fastestmirror, re ...

  9. join()方法跟踪

    #join方法跟踪java.lang.Thread.join() 进入线程的join方法,实际上线程thread是实现的 runnable接口 class Thread implements Runn ...

  10. poj2082 Terrible Sets(单调栈)

    Description Let N be the set of all natural numbers {0 , 1 , 2 , . . . }, and R be the set of all re ...