有时候我们要转换图片为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. Css_*^$

    #search_condition [class*=search_submit] 表示class name里面的值包含search_submit $("#search_condition [ ...

  2. kali linux 安装Nessus

    Nessus 介绍: Nessus 是目前全世界最多人使用的系统漏洞扫描与分析软件.总共有超过75,000个机构使用Nessus 作为扫描该机构电脑系统的软件. 下载Nessus,我的是64为,我选择 ...

  3. R语言做相关性分析

    衡量随机变量相关性的方法主要有三种:pearson相关系数,spearman相关系数,kendall相关系数: 1.       pearson相关系数,亦即皮尔逊相关系数 pearson相关系数用来 ...

  4. 关于增强的for循环

    增强的for循环例子:public static<AnyType> void print(Collection<AnyType> coll){ for(AnyType item ...

  5. Supervised Hashing with Kernels, KSH

    Notation 该论文中应用到较多符号,为避免混淆,在此进行解释: n:原始数据集的大小 l:实验中用于监督学习的数据集大小(矩阵S行/列的大小) m:辅助数据集,用于得到基于核的哈希函数 r:比特 ...

  6. 我是一个程序猿 ——《不是书评 :<我是一只IT小小鸟>》有感

    读了刘未鹏先生的文章<不是书评 :<我是一只IT小小鸟>>,产生了诸多共鸣,更明白了不少道理. 首先是一个很平常的现象,进度条效应,在操作移动终端上的软件时,如果没有进度条,人 ...

  7. HDU 2030 汉字统计

    http://acm.hdu.edu.cn/showproblem.php?pid=2030 Problem Description 统计给定文本文件中汉字的个数.   Input 输入文件首先包含一 ...

  8. nodejs的事件驱动理解

    // 引入 events 模块 var events = require('events'); // 创建 eventEmitter 对象 var eventEmitter = new events. ...

  9. 6 vue-cli mock数据

    https://www.cnblogs.com/dengxiaolei/p/7338773.html //--------------------------------------const por ...

  10. 第六周 可执行代码 以及 PSP 燃尽图 等等

    转眼已经第六周了.这周主要内容有下:(CHECKLIST) 1.完成未完成的功能点. 2.PSP. 3.站立会议. 4.燃尽图. 5.各种图(折线,饼图). 6.checkList 具体任务如下: 1 ...