base64格式的图⽚数据如何转成图⽚
base64格式的图⽚数据如何转成图⽚
⼀、总结
⼀句话总结：不仅要去掉前⾯的格式串，还需要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//  创建将数据流⽂件写⼊我们创建的⽂件内容中
8file_put_contents($path, base64_decode($base_img));
9// 输出⽂件
10print_r($output_file);
1、base64编码表是怎样的？
Base64编码表
码值字符码值字符码值字符码值字符
0A16Q32g48w
1B17R33h49x
2C18S34i50y
3D19T35j51z
4E20U36k520
5F21V37l531
6G22W38m542
7H23X39n553
8I24Y40o564
9J25Z41p575
10K26a42q586
11L27b43r597
12M28c44s608
13N29d45t619
14O30e46u62+
15P31f47v63/
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 =DataURL("image/jpeg");
b、利⽤ html5 的 FileReader 将图⽚转化base64格式 FileReader 是H5提供的⼀个处理⽂件的API，
var reader=new FileReader();
⼆、将base64数据流⽂件转换为图⽚⽂件
转⾃或参考： blog.csdn/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博客
blog.csdn/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 = ateElement("canvas");
var ctx = Context('2d'),
img = new Image;
img.src="./vheider.jpg";
//  img.setAttribute('crossOrigin', 'anonymous')  // 图⽚跨域时有⽤
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
dataURL =DataURL("image/jpeg");
$('#img').attr('src', dataURL);
console.DataURL("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 = ElementById("result");
var file = ElementById("file");
file.change=function(){
var file = file.files[0]
var reader=new FileReader();
imgDiv.innerHTML='<img src="'+sult+'" alt=""/>'
console.log(this) // 打印出转换后的 file ⽂件对象
}
}
参考：将图⽚转换base64格式，data:image/png;base64是什么？ - CSDN博客
blog.csdn/webxiaoma/article/details/70053444
四、base64格式图⽚数据上传到服务器并转图⽚（测试成功）
1、截图
2、代码
ajax上传数据代码
$.post("index.php", { dataURL: dataURL},
html代码转链接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//  创建将数据流⽂件写⼊我们创建的⽂件内容中
11file_put_contents($path, base64_decode($base_img));
12// 输出⽂件
13print_r($output_file);
14  ?>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。