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

一、總結

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

// $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);

 

 

1、base64編碼表是怎樣的？

Base64編碼表

碼值	字符		碼值	字符		碼值	字符		碼值	字符
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個'='。

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

 

2、base64可以做圖片src屬性的地址么？

可以的

src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串編碼。它把一些 8-bit 數據翻譯成標准 ASCII 字符，網上有很多免費的base64 編碼和解碼的工具， 后面跟的一串代碼就相當於鏈接地址。

 

3、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圖片數據

 

4、將圖片轉化為base64格式的方法？

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

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

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

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

 

 

二、將base64數據流文件轉換為圖片文件

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

前后端交互處理圖片的時候，會出現這樣的情況：
前端傳遞給我們后端的是base64的圖片數據流，我們需要做的就是將它轉為圖片並且保存起來，根據需要再決定是否將圖片存儲路徑信息返回給前端。

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

• 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

 

 

 

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

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

src或 url() 中有一大串編碼。它把一些 8-bit 數據翻譯成標准 ASCII 字符，網上有很多免費的base64 編碼和解碼的工具， 后面跟的一串代碼就相當於鏈接地址。

二、目前，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圖片數據

三、js將圖片轉化為base64（2種方法）

1. 利用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>       

JS

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

 

 

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

1、截圖

 

 

 

2、代碼

ajax上傳數據代碼

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

 

后台php處理數據代碼（我的數據格式是jpeg）

<?php
//print_r($_POST);
$base_img=$_POST['dataURL'];
// $base_img是獲取到前端傳遞的值
$base_img = str_replace('data:image/jpeg;base64,', '', $base_img);
//  設置文件路徑和命名文件名稱
$path = "./";
$output_file = time().rand(100,999).'.jpeg';
$path = $path.$output_file;
//  創建將數據流文件寫入我們創建的文件內容中
 file_put_contents($path, base64_decode($base_img));
// 輸出文件
print_r($output_file);
  ?>