大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAB1JREFUCJljONjA8LiBoZyBwY6BQQZMAtlAkYMNAF1fBs/zPvcnAAAAAElFTkSuQmCC
那么这是什么呢?这是Data URI scheme。
Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
目前,Data URI 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简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如
echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。
举个图片的例子:
网页中一张图片可以这样显示:
<img src="http://mail.163.com/images/x.png" />
也可以这样显示:
<img src="https://img-blog.csdnimg.cn/2022010617174634364.png" />
c#后台代码:
private string decodeBase64ToJpg(string dataURL,string imgName) { try { string filePath = "D:\\Temp\\images\\" + imgName; byte[] arr = Convert.FromBase64String(dataURL.Substring(dataURL.IndexOf("base64,") + 7).Trim('\0')); using (MemoryStream ms = new MemoryStream(arr)) { Bitmap bmp = new Bitmap(ms); //新建第二个bitmap类型的bmp2变量 Bitmap bmp2 = new Bitmap(bmp, bmp.Width, bmp.Height); //将第一个bmp拷贝到bmp2中 Graphics draw = Graphics.FromImage(bmp2); draw.DrawImage(bmp,0,0); draw.Dispose(); bmp2.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg); ms.Close(); return filePath; } } catch (Exception ex) { return ""; } }
public string decodeBase64ToPng(string dataURL, string imgName) { string filename = "";//声明一个string类型的相对路径 string imagesurl2 = ""; String base64 = dataURL.Substring(dataURL.IndexOf(",") + 1); //将‘,’以前的多余字符串删除 System.Drawing.Bitmap bitmap = null;//定义一个Bitmap对象,接收转换完成的图片 try//会有异常抛出,try,catch一下 { String inputStr = base64;//把纯净的Base64资源扔给inpuStr,这一步有点多余 byte[] arr = Convert.FromBase64String(inputStr);//将纯净资源Base64转换成等效的8位无符号整形数组 System.IO.MemoryStream ms = new System.IO.MemoryStream(arr);//转换成无法调整大小的MemoryStream对象 System.Drawing.Bitmap bmp = new System.Drawing.Bitmap(ms);//将MemoryStream对象转换成Bitmap对象 ms.Close();//关闭当前流,并释放所有与之关联的资源 bitmap = bmp; filename = imgName;//所要保存的相对路径及名字+ ".png" //string tmpRootDir = Server.MapPath(System.Web.HttpContext.Current.Request.ApplicationPath.ToString()); //获取程序根目录 imagesurl2 = "D:\\Temp\\images\\" + filename; //转换成绝对路径 bitmap.Save(imagesurl2, System.Drawing.Imaging.ImageFormat.Png);//保存到服务器路径 } catch (Exception) { } return imagesurl2;//返回路径 }
前端代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax</title> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <div class="upload"> <input type="button" class="btn" onclick="img_upload_file.click()" value="上传"> <input type="file" id="img_upload_file" style="display: none;" class="test"> <div class="img_center"> <img src="" id="img_upload_show" style="border: #0000FF solid 2px;width: 600px;height: 600px;"> </div> </div> <script type="text/javascript"> var jsonData = ''; $(function() { $("#img_upload_file").change(function() { var oFile = this.files[0]; console.log("oFile") console.log(oFile) var reader = new FileReader(); reader.readAsDataURL(oFile); //调用自带方法进行转换 reader.onload = function(e) { $("#img_upload_show").attr("src", this.result); //将转换后的编码存入src完成预览 var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i; console.log(oFile.type); if(!rFilter.test(oFile.type)) { alert("文件格式必须为图片"); return; } /*if(oFile.size > iMaxFilesize) { alert("图片大小不能超过2M"); return; }*/ var xyString1 = "462.7558,722.0276,12734808.3808,3570844.6208"; var xyString2 = "1272.6326,760.5932,12734820.7004,3570844.3868"; var xyString3 = "394.1948,953.4210,12734808.2984,3570839.6826"; var xyString4 = "1268.3476,996.2716,12734820.7004,3570839.4260"; jsonData = oFile.name + " " + oFile.type + " " + this.result + " " + xyString1 + " " + xyString2 + " " + xyString3 + " " + xyString4; console.log(jsonData); $.ajax({ url: 'http://127.0.0.1:6163/igs/rest/test/GetImage', data: jsonData, type: "POST", dataType: "json", contentType: 'application/x-www-form-urlencoded;charset=UTF-8', //防止乱码 success: function(data) { console.log(data); } }); }; }); }) </script> </body> </html>