當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

base64格式的图片数据如何转成图片

發(fā)布時(shí)間：2024/8/26 综合教程 34 生活家

生活随笔收集整理的這篇文章主要介紹了 base64格式的图片数据如何转成图片小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

base64格式的圖片數(shù)據(jù)如何轉(zhuǎn)成圖片

一、總結(jié)

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

 1 // $base_img是獲取到前端傳遞的值
 2 $base_img = str_replace('data:image/jpg;base64,', '', $base_img);
 3 //  設(shè)置文件路徑和命名文件名稱
 4 $path = "./";
 5 $output_file = $prefix.time().rand(100,999).'.jpg';
 6 $path = $path.$output_file;
 7 //  創(chuàng)建將數(shù)據(jù)流文件寫(xiě)入我們創(chuàng)建的文件內(nèi)容中
 8  file_put_contents($path, base64_decode($base_img));
 9 // 輸出文件
10 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編碼說(shuō)明
　　Base64編碼要求把3個(gè)8位字節(jié)（3*8=24）轉(zhuǎn)化為4個(gè)6位的字節(jié)（4*6=24），之后在6位的前面補(bǔ)兩個(gè)0，形成8位一個(gè)字節(jié)的形式。如果剩下的字符不足3個(gè)字節(jié)，則用0填充，輸出字符使用'='，因此編碼后輸出的文本末尾可能會(huì)出現(xiàn)1或2個(gè)'='。

　　為了保證所輸出的編碼位可讀字符，Base64制定了一個(gè)編碼表，以便進(jìn)行統(tǒng)一轉(zhuǎn)換。編碼表的大小為2^6=64，這也是Base64名稱的由來(lái)。

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

可以的

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

src或 url() 中有一大串編碼。它把一些 8-bit 數(shù)據(jù)翻譯成標(biāo)準(zhǔn) ASCII 字符，網(wǎng)上有很多免費(fèi)的base64 編碼和解碼的工具，后面跟的一串代碼就相當(dāng)于鏈接地址。

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

data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)

4、將圖片轉(zhuǎn)化為base64格式的方法？

a、利用canvas 將圖片轉(zhuǎn)化為base64 編碼格式

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

b、利用 html5 的 FileReader 將圖片轉(zhuǎn)化base64格式 FileReader 是H5提供的一個(gè)處理文件的API，

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

二、將base64數(shù)據(jù)流文件轉(zhuǎn)換為圖片文件

轉(zhuǎn)自或參考： https://blog.csdn.net/gu_wen_jie/article/details/79050287

前后端交互處理圖片的時(shí)候，會(huì)出現(xiàn)這樣的情況：
前端傳遞給我們后端的是base64的圖片數(shù)據(jù)流，我們需要做的就是將它轉(zhuǎn)為圖片并且保存起來(lái)，根據(jù)需要再?zèng)Q定是否將圖片存儲(chǔ)路徑信息返回給前端。

下面就來(lái)說(shuō)一下這個(gè)怎么處理，其實(shí)很簡(jiǎn)單，就是一個(gè)轉(zhuǎn)碼存儲(chǔ)的過(guò)程。

1.假設(shè)現(xiàn)在前端將數(shù)據(jù)流傳過(guò)來(lái)了（這個(gè)地方你可以自己用在線工具將本地的某張圖片轉(zhuǎn)碼為base64格式然后拿來(lái)測(cè)試）

2.我們接收到之后需要進(jìn)行一個(gè)簡(jiǎn)單的寫(xiě)入和存儲(chǔ)操作。

3.代碼如下

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

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

參考：將base64數(shù)據(jù)流文件轉(zhuǎn)換為圖片文件 - CSDN博客
https://blog.csdn.net/gu_wen_jie/article/details/79050287

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

一、我們?cè)诳创a時(shí)經(jīng)常在img或css背景圖片中看到：
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

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

data:,文本數(shù)據(jù)
data:text/plain,文本數(shù)據(jù)
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圖片數(shù)據(jù)
data:image/png;base64,base64編碼的png圖片數(shù)據(jù)
data:image/jpeg;base64,base64編碼的jpeg圖片數(shù)據(jù)
data:image/x-icon;base64,base64編碼的icon圖片數(shù)據(jù)

三、js將圖片轉(zhuǎn)化為base64（2種方法）

利用canvas 將圖片轉(zhuǎn)化為base64 編碼格式

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
 //  img.setAttribute('crossOrigin', 'anonymous')  // 圖片跨域時(shí)有用
   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"))

  };

注意： 這里要在服務(wù)端打開(kāi)，不然瀏覽器可能會(huì)報(bào) index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 錯(cuò)誤

2 . 利用 html5 的 FileReader 將圖片轉(zhuǎn)化base64格式

FileReader 是H5提供的一個(gè)處理文件的API，
① 判斷瀏覽器是否支持FileReader

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

② FileReader 接口有四個(gè)方法：

readAsBinaryString (file) 將文件讀取為二進(jìn)制碼
readAsDataURL (file) 將文件讀取為 DataURL
readAsText (file,encoding) 將文件讀取為文本(第二個(gè)參數(shù)是編碼格式，一般默認(rèn)是UTF-8)
about 中斷讀取

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

onabort 中斷時(shí)觸發(fā)
onerror 出錯(cuò)時(shí)觸發(fā)
onload 文件讀取成功完成時(shí)觸發(fā)
onloadend 讀取完成觸發(fā)，無(wú)論成功或失敗
onloadstart 讀取開(kāi)始時(shí)觸發(fā)
onprogress 讀取中

注意：重點(diǎn)內(nèi)容
FileReader 讀取后的文件不會(huì)返回給FileReader 本身，而是存儲(chǔ)在了 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) // 打印出轉(zhuǎn)換后的 file 文件對(duì)象
    }  
}

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

四、base64格式圖片數(shù)據(jù)上傳到服務(wù)器并轉(zhuǎn)圖片（測(cè)試成功）

1、截圖

2、代碼

ajax上傳數(shù)據(jù)代碼

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

后臺(tái)php處理數(shù)據(jù)代碼（我的數(shù)據(jù)格式是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 //  設(shè)置文件路徑和命名文件名稱
 7 $path = "./";
 8 $output_file = time().rand(100,999).'.jpeg';
 9 $path = $path.$output_file;
10 //  創(chuàng)建將數(shù)據(jù)流文件寫(xiě)入我們創(chuàng)建的文件內(nèi)容中
11  file_put_contents($path, base64_decode($base_img));
12 // 輸出文件
13 print_r($output_file);
14   ?>

總結(jié)

以上是生活随笔為你收集整理的base64格式的图片数据如何转成图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。