chrome 隐藏技能之 base64 图片转换

有时候我们要转换图片为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 图片转换的更多相关文章
- Base64 图片转换工具
以前在写asp的后台的时候,有一个上传功能是必须的,那时候进行的图片预览(未上传前)其实就是获取本地的图片路径来显示图片,但是随着HTML5的出现,可以把图片通过编码来实现预览. 在雅虎的36条速度优 ...
- IOS开发---菜鸟学习之路--(十四)-将BASE64图片转换成Image
本文基本全部都是代码 首先是.H文件 #import <Foundation/Foundation.h> @interface Base64AndImageHelp : NSObject ...
- Java base64 图片编码转换
package com.test; import org.junit.Test; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encode ...
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- 图片转换base64数据上传,并且实现预览的简便方法
对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...
- Base64图片编码原理,base64图片工具介绍,图片在线转换Base64
Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少 ...
- 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- 运用C语言将图片转换成16进制的字符串(base64)
最近在写手机端的性能测试脚本的时候,发现手机在上传图片数据时,先将图片转换成一堆16进制的字符,将字符传输过去,服务器再将字符解码成图片 我们在loadrunner中测试时,就需要用C语言将图片编码. ...
- java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
随机推荐
- 英特尔帮助优化 Epic 的《堡垒之夜》* 和 Unreal Engine*
您可能知道,Epic 的游戏<堡垒之夜>是 Unreal Engine* 技术的绝佳示例,<堡垒之夜>的开发团队正不断改进游戏,增加支持平台的数量并将信息反馈给引擎.为此,英特 ...
- (三)Hyperledger Fabric 1.1安装部署-chaincode测试
环境搭建完毕,需要的工具和镜像安装完毕,就可以进行chaincode测试了,接下来参考官方教程运行first-network. 进入first-netwok: cd first-network fir ...
- 《Linux内核分析与设计》读书笔记二
第五章 5.1 与内核通信57 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 首先它为用户空间提供了一种硬件的抽象接口,举例来说当需要读写文件的时候,应用程序就可以不去管 ...
- linux 常用命令-用户、用户组管理
注:本篇只涉及常用命令,全部命令可以通过help帮助查看. (1)type useradd #查看命令属于内部命令还是外部命令,内部命令是嵌在linux的shell中,外部命令存储在路径中 (2) ...
- C++的OOP特性
内存模型和名称空间 存储持续性,作用域和链接性 C++有三种方案来存储数据 自动存储持续性:在函数定义中声明的变量,包括函数参数.在函数或代码块开始执行时创建.执行完函数或者代码块,内存自动释放. 静 ...
- Java认识对象
一.类与对象 java中有基本类型和类类型两个类型系统.Java撰写程序几乎都在使用对象,要产生对象必须先定义类,类是对象的设计图,对象是类的实例 1.定义类 类定义使用的关键词为class,建立实例 ...
- [CB]Intel 2018架构日详解:新CPU&新GPU齐公布 牙膏时代有望明年结束
Intel 2018架构日详解:新CPU&新GPU齐公布 牙膏时代有望明年结束 北京时间12月12日晚,Intel在圣克拉拉举办了架构日活动.在五个小时的演讲中,Intel揭开了2021年CP ...
- [转帖]SAP MES生产执行系统解决方案
一.SAP MES概述: SAP公司成立于1972年,总部位于德国,是全球最大的企业管理和协同化商务解决方案供应商.全球第三大独立软件供应商.目前,在全球有120多个国家的超过86,000多家用户正在 ...
- day5——Java 实现导出excel表 POI(转)
1.首先下载poi-3.6-20091214.jar,下载地址如下: http://download.csdn.net/detail/evangel_z/3895051 2.Student.java ...
- 二分图最大权匹配模板(pascal)
用uoj80的题面了: 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这样的条件:第 vv 个男生和 ...