Java实现头像截取裁剪后图片保存,获取的是base64数据,怎么转换为图片并保存到数据库。并读取出来。

Java实现头像拖拽截取裁剪后图片保存,获取的是base64数据,base64数据转换为图片后存入到数据库。并读取出来。

1.操作过程效果截图：

点击编辑头像进入头像上传页面



头像上传页面



点击选择图片，选择需要上传的图片进行拖拽裁剪



裁剪后的图片进行保存



保存后的图片存入数据库，存入本地文件夹





2.需要的材料(html, js ,css)，太多了我就不发出了，我这个也是下载那个然后自己修改的。下面是静态Demo页面的下载地址。

http://www.w2bc.com/article/194799

百度头像裁剪截取拖拽也可以找到：



下载后内容：



3.打开静态页面，对页面做简单的修改。

添加一个textarea文本域用来存取base64数据。

<div id="text">
<textarea rows="10" cols="100"></textarea>
</div>

js添加两行: alert()用来测试，textarea用来存取base64数据。

alert(cropper.getDataURL());
$('#text textarea').val(cropper.getDataURL());

选择图片，测试：页面texteare已经获取。



4.将Js,css，html 加入 Java Web里面。页面加入form 表单，点击保存时，把texteare的base64数据提交到controller控制器里面进行base64数据转为图片，并保存到数据库和本地。

jsp页面修改。



建一个base64数据格式和图片相互转换的base64类。（重要）

package com.ssm.jock.utils;

import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

public class Base64
{
//图片转化成base64字符串
public static String GetImageStr(String imageName)
{//将图片文件转化为字节数组字符串，并对其进行Base64编码处理
String imgFile = imageName;//待处理的图片
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 imageName)
{   //对字节数组字符串进行Base64解码并生成图片
if (imgStr == null) //图像数据为空
return false;
BASE64Decoder decoder = new BASE64Decoder();
try
{
//Base64解码
byte[] b = decoder.decodeBuffer(imgStr);
for(int i=0;i<b.length;++i)
{
if(b[i]<0)
{//调整异常数据
b[i]+=256;
}
}
//生成jpeg图片
String imgFilePath = imageName;//新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
return true;
}
catch (Exception e)
{
return false;
}
}
}

控制器代码：

/**
* 根据Id获取该用户的头像并删除
* 获取base64数据的图片数据，转为图片格式存入指定文件夹里面
* @param buyerMess 用户对象
* @param text base64数据
* @param request
* @return
* @throws Exception
*/
@RequestMapping("/updateUserMess")
public String updatePhotoUrl(
BuyerMess buyerMess,
String text,
Model model,
HttpServletRequest request) throws Exception{
//输出base64 数据,截取","之后的值进行转换
String str = text.substring(text.indexOf(",")+1);
//System.currentTimeMillis()意思是获取当前系统的时间戳给图片命名
//实例化Base64转换类  调用里面的GenerateImage方法（把base64数据转为图片）
//第一个参数base64转图片的必须的base64数据，第二个是转换后生成的图片存放路径
Base64.GenerateImage(str, "D:/images/user_head/"+System.currentTimeMillis()+".jpg");
//数据库存入绝对路径下的图片名称（上传图片即是修改操作）
buyerMess.setPhotourl("D:/images/user_head/"+System.currentTimeMillis()+".jpg");
buyerMess.setId("zhangsan");
//根据用户Id修改头像图片存的路径
Integer ret = buyerMessService.updatePhotoUrl(buyerMess);
if(ret>0){
System.out.println("存入成功");
}else{
System.out.println("存入失败");
}
//调用查询方法，返回到页面
return "redirect:/first.htm";
}

4.为什么需要截取：因为获取的base64数据不能识别前面带“data:image/png;base64,”的。把这个截取后才能被识别，否则生成不了。

设置断点，鼠标悬浮到text上面，可以看到下面的base64数据已经传入此方法里面了。



对base64数据进行截取。（把“，”号之前的data:image/png;base64, 截取掉，只需要后面的数据才能转换）



5.总结：其实看上去很多，实际很简单。大致分为5步。

把前台获取的base64数据传入后台。

把获取的base64数据进行截取，只需要“，”逗号之后的数据才能转换。

创建base64转换的类，用于把base64数据转为图片。

调用base64数据转换为图片的方法，参数（base64数据，图片保存地址）。

设置数据库的图片路径为图片保存路径。