Chinaunix首页 | 论坛 | 博客
  • 博客访问: 48014
  • 博文数量: 13
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 143
  • 用 户 组: 普通用户
  • 注册时间: 2018-05-22 11:18
个人简介

在线助手|在线工具【http://www.it399.com】 在线助手博客【http://www.it399.com/blog/index】

文章分类
文章存档

2020年(3)

2018年(10)

分类: Java

2018-05-24 16:23:58

在线工具:图片在线转base64,base64在线转图片工具

一、图片在线转base64
如下图,打开在线助手 http://www.it399.com/image/base64 将想要转换的图片拖动到在线助手的工具中即可自动完成将图片转成base64编码


二、base64在线转图片
复制想要转换的图片base64编码字符串,比如

data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAIAAAAI7H7bAAAFUElEQVR4nO3dQZLbOBAAQWnD///y
7A9waJfgpibz6pCGZKgChzbA98/Pzwv4O//96wuAbyAkCAgJAkKCgJAgICQICAkCQoLAn8O/vd/v
a9eRywfN+dM4XOHNJ59fxpL7yp1/UVYkCAgJAkKCgJAgICQICAkCQoKAkCBwGsgeLNlXOxvwHT6V
39dsOnnz8eZT15lH/6JeViRICAkCQoKAkCAgJAgICQJCgoCQIDAcyB7c3Em65AsPbo6M9z/5mUfc
lxUJAkKCgJAgICQICAkCQoKAkCAgJAj0A1k+asmG1iXbe/ewIkFASBAQEgSEBAEhQUBIEBASBIQE
AQPZz5pNJ/M9oeann2ZFgoCQICAkCAgJAkKCgJAgICQICAkC/UB2/4BvNp3MR6uzL7x5ZPGSMe7+
X9TLigQJIUFASBAQEgSEBAEhQUBIEBASBIYD2Xz2t9+S6eTMbIybf+rg6b8oKxIEhAQBIUFASBAQ
EgSEBAEhQUBIEHjvHybm8tlfvmv15iT04NEz6MusSBAQEgSEBAEhQUBIEBASBIQEASFBYMs7ZG9u
kFwy7rx5ZPGSWW0+np75xIOyIkFASBAQEgSEBAEhQUBIEBASBIQEgdMO2SU7SZdsxrx5SO/NEeTM
LzyX+HzLViQICAkCQoKAkCAgJAgICQJCgoCQIDA8svjmSbwzN8e4j94uevDoKfnBJ/5jgBUJAkKC
gJAgICQICAkCQoKAkCAgJAicjizO54xLpq7754wHSy7+5n7hmZvT/5cVCRJCgoCQICAkCAgJAkKC
gJAgICQIfO0O2ZuWjHGXzGpv2nOOtBUJAkKCgJAgICQICAkCQoKAkCAgJAgMd8gezAZh+SmySz41
k/+tJYPL/Z8asyJBQEgQEBIEhAQBIUFASBAQEgSEBIHTQHYmH+N+6/x0yRUu+cL9t3xmRYKAkCAg
JAgICQJCgoCQICAkCAgJAsMji0/fuOPg3G+dhM7sf+Vr7vLmWSsSBIQEASFBQEgQEBIEhAQBIUFA
SBA4DWQfPcVbcl/7N8/mlsygDz5xFrcVCQJCgoCQICAkCAgJAkKCgJAgICQIDAeyM79wVLdk6rp/
gD6zZ3+3FQkCQoKAkCAgJAgICQJCgoCQICAkCJzeIZtP8W5OJ2cX/61bU28+w9zsF3XwifuyIkFA
SBAQEgSEBAEhQUBIEBASBIQEgdNAdubmFO/m1tSbmzHzL5zd8pLXAc9cvkIrEgSEBAEhQUBIEBAS
BIQEASFBQEgQOA1kb24/nP2tR7+8df8VHuzfL3zwiUGzFQkCQoKAkCAgJAgICQJCgoCQICAkCJze
IfutHr0NduZbtxLvuS8rEgSEBAEhQUBIEBASBIQEASFBQEgQ6HfILrFktJrvF87v6+aW22+9r5cV
CRJCgoCQICAkCAgJAkKCgJAgICQIDN8hu2Rf7c2R8c3R6pKTk3NLNs9+4vFakSAgJAgICQJCgoCQ
ICAkCAgJAkKCwHAge/DoiWEuPx13/9PYPyX/BCsSBIQEASFBQEgQEBIEhAQBIUFASBDoB7L7XT7M
duDm8cizL8yvcP9Lac+sSBAQEgSEBAEhQUBIEBASBIQEASFB4DcOZGf2vw12yRj3pvzxjr/QigQB
IUFASBAQEgSEBAEhQUBIEBASBPqB7KMHfAc3N8/efDXqo4+Y3vNjsyJBQEgQEBIEhAQBIUFASBAQ
EgSEBIHhQHbJ0b65/Ezd/EHdnJ/O/tbNafLNU5rPrEgQEBIEhAQBIUFASBAQEgSEBAEhQeC9Z48h
PJcVCQJCgoCQICAkCAgJAkKCgJAgICQICAkC/wNRICowTcnIUgAAAABJRU5ErkJggg==


粘贴在右边的输入框,然后点base64还原成图片即可。



三、base64图片的用法及好处

1.将图片转换为Base64编码,可以很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。

2.加入图片在线转base64的结果为"data:image/png;base64,iVBORw0KGgo=...",那么你只需要全部复制,然后在插入图片的时候,src地址填写这段代码即可。

3.CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=...");

4.HTML中使用:src="data:image/png;base64,iVBORw0KGgo=..."

5.将图片转换成base64编码的,一般用于小图片上,不仅可以减少图片的请求数量(集合到js、css代码中),还可以防止因为一些相对路径等问题导致图片404错误。




阅读(538) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~