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

最新推荐文章于 2025-07-16 15:14:06 发布

原创最新推荐文章于 2025-07-16 15:14:06 发布 · 5.9k 阅读

9 ·

CC 4.0 BY-SA版权

技术代码专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍Base64编码在图片处理中的应用，包括图片转Base64、Base64转图片、存储与数据库及跨域问题解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

js中

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

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一
一、将base64转换成图片
只需要在img 标签中引入即可，注意要加上标明前缀（data:image/png;base64），否则并不知道，这串代码是干啥的
如：
<img src="https://img-blog.csdnimg.cn/2022010621283513081.png"color:#7c79e5;">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;
	}

<img id="showPic" width="120" height="140" style="border:1px solid #ddd;">用于显示图片
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种方法）

利用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>

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.youkuaiyun.com/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"

这里使用<input type="file">上传文件到jsp页面，也便于传值到后台

使用MultipartFile file接收参数文件

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

po类User

mapper.xml