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 // 创建将数据流文件写入我们创建的文件内容中 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编码说明
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数据流文件转换为图片文件
前后端交互处理图片的时候,会出现这样的情况:
前端传递给我们后端的是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,这样就搞定了。你可以将路径信息返回给前端使用。
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种方法)
- 利用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 文件对象}
}
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)
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 ?>
base64格式的图片数据如何转成图片相关推荐
- (超详细)读取mnist数据集并保存成图片
mnist数据集介绍.读取.保存成图片 1.mnist数据集介绍: MNIST数据集是一个手写体数据集,简单说就是一堆这样东西 MNIST的官网地址是 MNIST; 通过阅读官网我们可以知道,这个数 ...
- vue删除图片同时删除本地文件_删除图片数据时同时删除图片文件夹里面的相应图片文件的方法...
作者:Mr.XQIJIANG 本文版权归[Mr.XQIJIANG]所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利. /// /// 删除图 ...
- java pdf输出图片_Java PDF转换成图片并输出给前台展示
首先需要导入所需工具类 org.apache.pdfbox fontbox 2.0.1 org.apache.pdfbox pdfbox 2.0.1 cn.hutool hutool-all 4.1. ...
- php_printer.dll 打印 jpg 图片,文档打印成图片(ImagePrinter)
让低版本的office支持将文档打印成图片的工具,ImagePrinter可以将文档"打印(虚拟打印)"成BMP.PNG.JPG.PDF等格式的文件,安装后会成为系统的默认打印机. ...
- caffe 图片数据的转换成lmdb和数据集均值(转)
转自网站: http://blog.csdn.net/muyiyushan/article/details/70578077 1.准备数据 使用dog/cat数据集,在训练项目根目录下分别建立trai ...
- 使用 Qt 获取 UDP 数据并显示成图片
一个项目,要接收 UDP 数据包,解析并获取其中的数据,主要根据解析出来的行号和序号将数据拼接起来,然后将拼接起来的数据(最重要的数据是 R.G.B 三个通道的像素值)显示在窗口中.考虑到每秒钟要接收 ...
- c#图片base64去转义字符_C# 将图片转成Base64字符串,再将字符串转成图片,然后将图片存储到服务器文件夹中,求代码。感激不尽...
展开全部 网上多的是:using System; using System.Collections.Generic; using System.ComponentModel; using System ...
- java 绘画心电图_用java程序读取心电图数据并绘制成图片
首先了解一下心电图纸的构成,首先背景是由1mm*1mm的小方格填充的.然后每5个小方格组成 一个大方格,像下面图所示就是心电图的一部分展示效果.心电图在上面绘制的时候 ,横向代表时间(s),纵向代表电 ...
- 通过http方式传递base64图片字符串无法还原成图片的问题
在使用http协议传递base64图片字符串的过程中,一些特殊字符会在传输过程中发生改变或者被添加了换行. 所以需要转义这些特殊字符以便传值. String str = base64String.re ...
最新文章
- 皮一皮:加了个班还以为鬼门大开魔界连同了...
- bzoj千题计划237:bzoj1492: [NOI2007]货币兑换Cash
- linux can 接收多帧_CAN编程介绍
- 《MySQL实战45讲》实践篇 24-29 学习笔记 (主备篇)
- php 正则替换style,php正则去除js,class,id,style标签代码
- centors7 和 win7 修改开机顺序
- (89c51)16x16点阵屏幕的实现
- 【雷达通信】基于matlab GUI雷达脉冲压缩【含Matlab源码 303期】
- winform实现委托
- C# WPF 一个设计界面
- uw计算机专业大一课程,大一新生选课攻略和你不能错过的小技巧
- 条件覆盖,路径覆盖,语句覆盖,分支覆盖
- n维空间被m个n-1维的“刀”最多切出多少块
- 戴尔台式计算机主板型号,如何查看戴尔主板型号_查看戴尔主板型号的步骤-系统城...
- php数据库用户名验证失败,PHP与MySQL 8.0+错误:服务器请求的身份验证方法未知...
- 未来十年,都从今天开始 | 全球视角的心理AI产品应用与探索
- 23_字符串的格式化_format 函数_% 占位符 _ f-string _Template _模板字符等
- React-bootstrap 中文文档
- nuget程序包还原失败:未能解析此远程名称
- siri打电话功能测试用例编写