base64格式的圖片數據如何轉成圖片

1、總結

一句話總結：不只要去掉前面的格式串，還須要base64_decode（）解碼才行。

 1 // $base_img是獲取到前端傳遞的值
 2 $base_img = str_replace('data:image/jpg;base64,', '', $base_img);  3 // 設置文件路徑和命名文件名稱
 4 $path = "./";  5 $output_file = $prefix.time().rand(100,999).'.jpg';  6 $path = $path.$output_file;  7 // 建立將數據流文件寫入咱們建立的文件內容中
 8  file_put_contents($path, base64_decode($base_img));  9 // 輸出文件
10 print_r($output_file);

一、base64編碼表是怎樣的？

Base64編碼表javascript

碼值	字符		碼值	字符		碼值	字符	碼值	字符
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

Base64編碼說明
　　Base64編碼要求把3個8位字節（3*8=24）轉化爲4個6位的字節（4*6=24），以後在6位的前面補兩個0，造成8位一個字節的形式。若是剩下的字符不足3個字節，則用0填充，輸出字符使用'='，所以編碼後輸出的文本末尾可能會出現1或2個'='。php

　　爲了保證所輸出的編碼位可讀字符，Base64制定了一個編碼表，以便進行統一轉換。編碼表的大小爲2^6=64，這也是Base64名稱的由來。css

二、base64能夠作圖片src屬性的地址麼？

能夠的html

src=」data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==」前端

src或 url() 中有一大串編碼。它把一些 8-bit 數據翻譯成標準 ASCII 字符，網上有不少免費的base64 編碼和解碼的工具，後面跟的一串代碼就至關於連接地址。html5

三、Data URL scheme 支持的類型有哪些？

data:,文本數據 data:text/plain,文本數據 data:text/html,HTML代碼 data:text/html;base64,base64編碼的HTML代碼 data:text/css,CSS代碼 data:text/css;base64,base64編碼的CSS代碼 data:text/JavaScript,Javascript代碼 data:text/javascript;base64,base64編碼的Javascript代碼 data:image/gif;base64,base64編碼的gif圖片數據 data:image/png;base64,base64編碼的png圖片數據 data:image/jpeg;base64,base64編碼的jpeg圖片數據 data:image/x-icon;base64,base64編碼的icon圖片數據

四、將圖片轉化爲base64格式的方法？

a、利用canvas 將圖片轉化爲base64 編碼格式java

dataURL =canvas.toDataURL("image/jpeg");

b、利用 html5 的 FileReader 將圖片轉化base64格式 FileReader 是H5提供的一個處理文件的API，web

var reader=new FileReader(); reader.readAsBinaryString(file);

2、將base64數據流文件轉換爲圖片文件

轉自或參考： https://blog.csdn.net/gu_wen_jie/article/details/79050287

先後端交互處理圖片的時候，會出現這樣的狀況：
前端傳遞給咱們後端的是base64的圖片數據流，咱們須要作的就是將它轉爲圖片而且保存起來，根據須要再決定是否將圖片存儲路徑信息返回給前端。ajax

下面就來講一下這個怎麼處理，其實很簡單，就是一個轉碼存儲的過程。canvas

1.假設如今前端將數據流傳過來了（這個地方你能夠本身用在線工具將本地的某張圖片轉碼爲base64格式而後拿來測試）
2.咱們接收到以後須要進行一個簡單的寫入和存儲操做。
3.代碼以下

// $base_img是獲取到前端傳遞的值
$base_img = str_replace('data:image/jpg;base64,', '', $base_img);
// 設置文件路徑和命名文件名稱
$path = "./";
$output_file = $prefix.time().rand(100,999).'.jpg';
$path = $path.$output_file;
// 建立將數據流文件寫入咱們建立的文件內容中
 file_put_contents($path, base64_decode($base_img));
// 輸出文件
print_r($output_file);

4.ok，這樣就搞定了。你能夠將路徑信息返回給前端使用。

參考：將base64數據流文件轉換爲圖片文件 - CSDN博客
https://blog.csdn.net/gu_wen_jie/article/details/79050287

3、將圖片轉換base64格式，data:image/png;base64是什麼？

1、咱們在看代碼時常常在img或css背景圖片中看到：
src=」data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==」

src或 url() 中有一大串編碼。它把一些 8-bit 數據翻譯成標準 ASCII 字符，網上有不少免費的base64 編碼和解碼的工具，後面跟的一串代碼就至關於連接地址。

2、目前，Data URL scheme 支持的類型：

data:,文本數據
data:text/plain,文本數據
data:text/html,HTML代碼
data:text/html;base64,base64編碼的HTML代碼
data:text/css,CSS代碼
data:text/css;base64,base64編碼的CSS代碼
data:text/JavaScript,Javascript代碼
data:text/javascript;base64,base64編碼的Javascript代碼
data:image/gif;base64,base64編碼的gif圖片數據
data:image/png;base64,base64編碼的png圖片數據
data:image/jpeg;base64,base64編碼的jpeg圖片數據
data:image/x-icon;base64,base64編碼的icon圖片數據

3、js將圖片轉化爲base64（2種方法）

利用canvas 將圖片轉化爲base64 編碼格式

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
 // img.setAttribute('crossOrigin', 'anonymous') // 圖片跨域時有用
   img.onload = function(){
       canvas.height = img.height;
       canvas.width = img.width;
       ctx.drawImage(img,0,0);
       dataURL =canvas.toDataURL("image/jpeg");

        $('#img').attr('src', dataURL);
        console.log(canvas.toDataURL("image/jpeg"))

  };

注意： 這裏要在服務端打開，否則瀏覽器可能會報 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 錯誤

2 . 利用 html5 的 FileReader 將圖片轉化base64格式
FileReader 是H5提供的一個處理文件的API，
① 判斷瀏覽器是否支持FileReader

if(window.FileReader){
    //處理文件
}else{
   return "瀏覽器不支持FileRedaer"
}

② FileReader 接口有四個方法：

readAsBinaryString (file) 將文件讀取爲二進制碼
readAsDataURL (file) 將文件讀取爲 DataURL
readAsText (file,encoding) 將文件讀取爲文本(第二個參數是編碼格式，通常默認是UTF-8)
about 中斷讀取

③ FileReader還提供給了一些事件：

onabort 中斷時觸發
onerror 出錯時觸發
onload 文件讀取成功完成時觸發
onloadend 讀取完成觸發，不管成功或失敗
onloadstart 讀取開始時觸發
onprogress 讀取中

注意：重點內容
FileReader 讀取後的文件不會返回給FileReader 自己，而是存儲在了 result 中

HTML

<input type="file" id="file"  multiple="multiple">
<div id="imgDiv"></div>

var result = document.getElementById("result");  
var file = document.getElementById("file");
file.change=function(){
    var file = file.files[0]
    var reader=new FileReader();  

    reader.readAsBinaryString(file);  
    reader.onload=function (e){  
        imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'  
        console.log(this) // 打印出轉換後的 file 文件對象
    }  
}

參考：將圖片轉換base64格式，data:image/png;base64是什麼？ - CSDN博客
https://blog.csdn.net/webxiaoma/article/details/70053444

4、base64格式圖片數據上傳到服務器並轉圖片（測試成功）

一、截圖

二、代碼

ajax上傳數據代碼

$.post("index.php", { dataURL: dataURL}, function(data){ alert("Data Loaded: " + data); });

後臺php處理數據代碼（個人數據格式是jpeg）

 1 <?php  2 //print_r($_POST);
 3 $base_img=$_POST['dataURL'];  4 // $base_img是獲取到前端傳遞的值
 5 $base_img = str_replace('data:image/jpeg;base64,', '', $base_img);  6 // 設置文件路徑和命名文件名稱
 7 $path = "./";  8 $output_file = time().rand(100,999).'.jpeg';  9 $path = $path.$output_file; 10 // 建立將數據流文件寫入咱們建立的文件內容中
11  file_put_contents($path, base64_decode($base_img)); 12 // 輸出文件
13 print_r($output_file); 14   ?>