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 ...
随机推荐
- 教你用PS制作雨天窗户上透明水滴字
雨天窗户上透明水滴字制作方法很简单,主要利用图层样式来实现.学习后可以让你对图层样式有更好的了解,认识. 先看下完成后的效果图: 步骤1: 在Photoshop中我们新建或Ctrl+N,创建1920x ...
- (1) English Learning
1. no-brainer 不必花脑筋的事物 This tool is really no-brainer that almost everyone can use it. 这个工具太简单用了,不会 ...
- PAT甲题题解-1043. Is It a Binary Search Tree (25)-二叉搜索树
博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789220.html特别不喜欢那些随便转载别人的原创文章又不给 ...
- PAT甲题题解-1117. Eddington Number(25)-(大么个大水题~)
如题,大水题...贴个代码完事,就这么任性~~ #include <iostream> #include <cstdio> #include <algorithm> ...
- Software-Defined Networking:A Comprehensive Survey--Day3
(接Day2的内容 +2s) E. Layer V: Northbound Interfaces 南行接口已经得到广泛接受(OpenFlow),但现在就定义北向接口还为时尚早,开发不同的控制器经验一定 ...
- python文本替换
file_data = '' str1 = ' str2 = ' with open(loginfofile, 'r+') as f: #打开文件,r+模式,读取 for line in f: if ...
- php多进程pcntl学习(一)
pcntl在windows下无法使用,linux编译php时加上参数--enable-pcntl 即可.第一次使用pcntl模块,遇到了一些坑也慢慢填上了,这里简单记录下. 1. 子进程之间变量无法共 ...
- 题解 P1130 【红牌】
逆推dp经典题目:数字三角形的折叠版 为什么这么说? 因为我们会发现:除了每一次都特判一下是否转换行号以外,剩下的思想没什么不同. 没看题目的看这里 先定义: n,m是步骤数目,小组数目 work[i ...
- Day25-JSONP跨域请求
1. json 是一种数据格式, jsonp 是一种数据调用的方式.你可以简单的理解为 带callback的json就是jsonp. 2. Python里面有个模块requests, request ...
- [Swerc2014 C]Golf Bot
题意:给你N个数字,每次利用这N个数字中最多两个数字进行加法运算,来得到目标中的M个数字. Solution: 我们先来看看多项式乘法:\(A(x)=\sum_{i=0}^{n-1}a_ix^i\), ...