圖片線上轉base64,base64線上轉圖片-線上助手

陳守印發表於2018-05-24
線上工具:圖片線上轉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錯誤。




來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/28470105/viewspace-2155052/,如需轉載,請註明出處,否則將追究法律責任。

相關文章