有时候我们要转换图片为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. 一个Boss直聘机器人, 自动回复发简历

    goBoss 基佬github地址 这是基于go语言编写的一款boss直聘机器人软件(牛人版).附上Python版本, 无需配置Go环境, 我会提供windows和macos的可执行程序.不喜勿喷O( ...

  2. PAT-1010 Radix

    1010 Radix (25 分) Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 1 ...

  3. PAT甲题题解-1029. Median (25)-求两序列的中位数,题目更新了之后不水了

    这个是原先AC的代码,但是目前最后一个样例会超内存,也就是开不了两个数组来保存两个序列了,意味着我们只能开一个数组来存,这就需要利用到两个数组都有序的性质了. #include <iostrea ...

  4. 《Linux内核设计与实现》读书笔记——第一、 二章

    <Linux内核设计与实现>读书笔记--第一. 二章 标签(空格分隔): 20135321余佳源 第一章 Linux内核简介 1.Unix内核特点 十分简洁:仅提供几百个系统调用并且有明确 ...

  5. 冲刺Two之站立会议2

    今天我们进行了主界面部分的设置,因为它包含的部分有很多,所以就只能它拆分进行一一突破.今天主要完成了主界面的框架搭建,以及添加了需要的按钮,包括好友管理,退出登录,开启聊天通信界面的内容等.

  6. 新手上路 git你好

    天哪,虽然我是一个学计算机的,但是我发现我的计算机学的真是……好吧不说了,言归正传.​ 这几天一直在着手于git,可能只是学了一个皮毛,结果也是不大尽人意,跟着别人学了学,鼓捣了鼓捣,还是有点小小的收 ...

  7. 获取所有选中框的ids值

    var os = $("input[name='rec_ids[]']:checked"); var ids = []; os.each(function(i){ ids.push ...

  8. 打包spring项目遇到的坑 Unable to locate Spring NamespaceHandler for XML schema ……shcema/context 产生的原因及解决方法

    图1 图2 问题原因:导致该问题的原因就是打包的时候,同时将 spring-context 和 spring-aop包提取到了我们的程序应用的包中,在package过程中,这2个依赖包的 XML sc ...

  9. C# 项目迁移 Microsoft.VisualStudio.Tools.Office.BuildTasks 生成解决方法报错:请确认 <UsingTask> 声明正确,该程序集及其所有依赖项都可用

    问题定位: 1.在Server2003上使用vs2010开发的项目,移到Win8上,同样使用vs2010打开.在生成解决方案的时候有如下报错: 未能从程序集 Microsoft.VisualStudi ...

  10. BZOJ 3171 循环格(费用流)

    题意 一个循环格就是一个矩阵,其中所有元素为箭头,指向相邻四个格子.每个元素有一个坐标(行,列),其中左上角元素坐标为(0,0).给定一个起始位置(r,c),你可以沿着箭头防线在格子间行走.即如果(r ...