图片的读取与存储，与base64的关系

在开发网页中，可将图片以Base64编码方式上传到服务器，并通过服务器保存到数据库中。若在Sybase中，可以存储为Image类型，在mysql中存储为Blob、MediumBlob类型（依据图片的大小）

js中

//convertBase64UrlToBlob函数是将base64编码转换为Blob

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一 
一、将base64转换成图片 
只需要在img 标签中引入即可，注意要加上标明前缀（data:image/png;base64），否则并不知道，这串代码是干啥的 
如： 
iVBORw0KGgoAAAANSUhEUgAAAAUA 
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0 DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt=""> 

Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到浏览器的地址栏中并转到，就能看到它了。
在上面的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 编码和解码的工具，在目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

// 图片转化成base64字符串
	public static String GetImageStr(String imgFile) {// 将图片文件转化为字节数组字符串，并对其进行Base64编码处理
		InputStream in = null;
		byte[] data = null;
		// 读取图片字节数组
		try {
			in = new FileInputStream(imgFile);
			data = new byte[in.available()];
			in.read(data);
			in.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		// 对字节数组Base64编码
		BASE64Encoder encoder = new BASE64Encoder();
		return encoder.encode(data);// 返回Base64编码过的字节数组字符串
	}
	    
	// base64字符串转化成图片
	public static boolean GenerateImage(String imgStr, String imgFilePath) throws Exception { 
		if (imgStr == null) // 图像数据为空
			return false;
		BASE64Decoder decoder = new BASE64Decoder();
 
		// Base64解码,对字节数组字符串进行Base64解码并生成图片
		byte[] b = decoder.decodeBuffer(imgStr);
		for (int i = 0; i < b.length; ++i) {
			if (b[i] < 0) {// 调整异常数据
				b[i] += 256;
			}
		}
		// 生成jpeg图片
		String imgFilePath = "D://1111.jpg";//新生成的图片
		OutputStream out = new FileOutputStream(imgFilePath);
		out.write(b);
		out.flush();
		out.close();
		return true;
	}

 

用于显示图片
js中可以使用$("#showPic").attr("src","data:image/jpeg;base64,"+GT2ICROCX.Base64Jpg);GT2ICROCX.Base64Jpg为图片的base64编码的字符流，加上data:image/jpeg;base64，会对其解码，以byte[]传送给服务器进行显示。

若在java后台中转化，将base64编码的字符流先进行解码，转成byte[]数组，设置返回文件类型setContentType=("image/jpeg");

拓展：

（作者：MeiMeng
链接：https://www.jianshu.com/p/ab8c5d7877ea
來源：简书）

 

三、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

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=''  
        console.log(this) // 打印出转换后的 file 文件对象
    }  
}

 

拓展：（
作者：偷代码的猫 
来源：CSDN 
原文：https://blog.csdn.net/qq_34819372/article/details/80565747 ）

一、分析一下基本流程
    从前台页面获取图片，后台接收图片文件转化成数据，然后存储到数据库，然后反向输出到jsp页面

二、分析一下数据转换和数据流通

  三、将图片存储到数据库中
     1、jsp页面将图片传到后台的过程

        jsp页面将图片通过form表单提交，后台通过MultipartFile类型接收图片文件

    

【注】form表单的默认的提交方式 method="get" 和 编码为enctype="application/x-www-form-urlencoded"

    但我们要提交文件则需要将其改为method="post"和 enctype="multipart/form-data"

这里使用上传文件到jsp页面，也便于传值到后台

使用MultipartFile file接收参数文件

2.在后台将数据转换，存储到数据库的过程

po类User

mapper.xml

数据库image类型应该使用blob类型，但根据文件大小可设置

TinyBlob 最大 255
Blob 最大 65K
MediumBlob 最大 16M
LongBlob 最大 4G

3.存储成功后数据库应该显示类似如下编码字符串

四、将图片从数据库中取出并显示在jsp页面上
1.从数据库获取图片

【注】mybatis配置看上

2.在jsp页面中显示

直接在src里填入超链接，并将图片id传过去查询该图片