java中图片上传+预览+剪切解决方案

我们在很多网站可以看到上传图片后可以剪切，下面我来介绍一个java中图片上传+预览+剪切解决方案吧，有需要的朋友可参考参考。

表现流程如下：

步骤1：点击浏览按钮选中图片-------1------>onchange事件把图片上传到服务器-------2----->图片路径回传

步骤2：进入切割图片------3----->切割，取得坐标，长度--------4---->传给服务器---------->后台切割产生新图片-----5------>回传新图路径

步骤3：页面截图预览

步骤1：

file标签：

代码如下复制代码

onchange事件调用的js方法：

ajaxFileUpload利用iframe模拟了ajax上传文件。url:"uploadPreviewImage.html" 就是后台地址，（本人使用的是spring mvc），success:function (data , status)，上传成功后调用的js中，$('#photo').imgAreaSelect方法是使用了imgAreaSelect插件来初始化截图界面。官网地址：http://odyniec.net/projects/imgareaselect/关于ajaxFileUpload的api可以查看官网，开始的时候我使用的是网上随便下的一个js，发现一直调不同，最后换了官网的，才ok。

代码如下复制代码

function uploadImage(){

// 检查图片格式

var f=document.getElementById("advImage").value;

if(!/.(gif|jpg|jpeg|png|JPG|PNG)$/.test(f))

{

alert("图片类型必须是.jpeg,jpg,png中的一种")

return false;

}

// 利用ajaxFileUpload js 插件上传图片

$.ajaxFileUpload({url:"uploadPreviewImage.html",

secureuri:false,

fileElementId:"advImage",

dataType:"json",

success:function (data , status) {

//上传成功后，直接跳出截图框，使用imgAreaSelect插件

piso = $('#photo').imgAreaSelect({

x1: 0, y1: 0, x2:480 , y2: 520 ,onSelectEnd: preview,

resizable: false,

instance: true,

persistent:true

});

// 这个方法是现实一个div，托住截图框

showCutImage();

// 一些变量在页面的隐藏input的设置

document.getElementById("photo").src = data.tempPath;

document.getElementById("currentPath").value = data.tempPath;

error:function (data, status, e) {

//alert("图片上传失败,请重新选择图片");

}

});

return false;

}

// 截图选中后调用方法，保存好起始坐标和宽高

function preview(img, selection)

{

$('#x1').val(selection.x1);

$('#y1').val(selection.y1);

$('#x2').val(selection.x2);

$('#y2').val(selection.y2);

$('#w').val(selection.width);

$('#h').val(selection.height);

} uploadPreviewImage方法，把文件方法零时文件夹下：

public ModelAndView uploadPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException{

User user = (User)request.getSession().getAttribute("user");

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;

MultipartFile image = multipartRequest.getFile("advImage");

response.setCharacterEncoding(BusinessConstants.ENCOD_UTF);

response.setHeader("ContentType", "json");

PrintWriter out = response.getWriter();

// 组合零时图片名

String imageName = image.getOriginalFilename();

String file_ext = imageName.substring(imageName.lastIndexOf(BusinessConstants.DOT) + 1);

SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT);

String tempImageName = user.getId() +BusinessConstants.UNDERLINE + df.format(new Date()) + BusinessConstants.DOT + file_ext;

// 存放浏览图片的零时文件路径

File file = new File(request.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH +

tempImageName));

byte[] advImageBytes = null;

InputStream advImageStream = null;

try {

file.createNewFile();

advImageStream = image.getInputStream();

advImageBytes = FileCopyUtils.copyToByteArray(advImageStream);

FileCopyUtils.copy(advImageBytes, file);

advImageStream.close();

} catch (IOException e) {

e.printStackTrace();

}

String tempPath = BusinessConstants.TEMP_RELATIVE_PICTURE_PATH +

tempImageName;

// 传给页面相对路径

out.print("{");

out.print("tempPath:'"+tempPath+"',");

out.print("msg:''");

out.print("}");

out.flush();

out.close();

// ajax

return null;

}

上面的uploadPreviewImage调用完成后就会把下面的div显示出来（初始隐藏）：

这就是截图界面啦！

代码如下复制代码

</div>

</div>

步骤2：

我们可以看到截图完毕后点击保存，就会调用cutImage方法：

里面我们利用dwr调用ReleaseService的cutImage方法。

代码如下复制代码

function cutImage(){

var list = new Array();

list[0] = $("#x1").val();

list[1] = $("#x2").val();

list[2] = $("#y1").val();

list[3] = $("#y2").val();

list[4] = $("#w").val();

list[5] = $("#h").val();

var currentPath = document.getElementById("currentPath").value;

// 这里是利用的dwr框架直接调用后台方法，以及使用后台传回的值

// 这个方法就是利用坐标宽高进行切图，事实上这时候的原图已经在服务器了，所以我们只需要知道他的相对路径，即currentPath

ReleaseService.cutImage(list, currentPath, function(value){

document.getElementById("currentPath").value = value;

}

);

var bgObj=document.getElementById("bgDiv");

var msgObj=document.getElementById("cutImageDiv");

bgObj.style.display = msgObj.style.display = "none";

piso.cancelSelection();

haveImage = 1;

$('#msHaveImage').show();

//$(".imgareaselect-outer").hide();

//$(".imgareaselect-selection").parent().hide();

}ReleaseService的cutImage方法：

public String cutImage(int[] size, String path) {

int x1 = size[0];

int x2 = size[1];

int y1 = size[2];

int y2 = size[3];

int w = size[4];

int h = size[5];

if(w <= 0)

w = 480;

if(h<=0)

h = 520;

if(x1<0)

x1 = 0;

if(y1<0)

y1 = 0;

//File file = new File(request.getSession().getServletContext().getRealPath(path));

path = path.substring(2);

WebContext ctx = WebContextFactory.get();

User user = (User)ctx.getSession().getAttribute("user");

SimpleDateFormat df = new SimpleDateFormat(BusinessConstants.DATE_FORMAT);

String file_ext = path.substring(path.lastIndexOf(BusinessConstants.DOT) + 1);

File file = new File(ctx.getSession().getServletContext().getRealPath(path));

String imageName = user.getId() + BusinessConstants.UNDERLINE +

df.format(new Date()) + BusinessConstants.DOT + file_ext;

String newFile = ctx.getSession().getServletContext().getRealPath(BusinessConstants.TEMP_PICTURE_PATH + imageName);

//切图操作

ImageCut.abscut(ctx.getSession().getServletContext().getRealPath(path), newFile, x1, y1, w, h);

return BusinessConstants.TEMP_RELATIVE_PICTURE_PATH + imageName;

}来看一下截图方法：主要是Graphics2D的drawImage方法。

public static void abscut(String srcImageFile,String desImageFile, int x, int y,int width, int height) {

try {

Image img;

ImageFilter cropFilter;

File srcFile = new File(srcImageFile);

//String fileName = srcFile.getName();

String ext = getExtension(srcImageFile);

if(ext==null)ext="jpg";

// 读取源图像

BufferedImage bi = ImageIO.read(srcFile);

int srcWidth = bi.getWidth(); // 源图宽度

int srcHeight = bi.getHeight(); // 源图高度

if (srcWidth >= width && srcHeight >= height) {

BufferedImage tag;

Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);

// 四个参数分别为图像起点坐标和宽高

// 即: CropImageFilter(int x,int y,int width,int height)

cropFilter = new CropImageFilter(x, y, width, height);

img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));

int type = BufferedImage.TYPE_INT_RGB;

if("gif".equalsIgnoreCase(ext)||"png".equalsIgnoreCase(ext)){

type = BufferedImage.TYPE_INT_ARGB;

}

tag = new BufferedImage(width, height,type);

Graphics2D g = (Graphics2D)tag.getGraphics();

g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,RenderingHints.VALUE_INTERPOLATION_BILINEAR);

g.drawImage(img, 0, 0, null); // 绘制剪切后的图

g.dispose();

ImageIO.write(tag,ext, new File(desImageFile));

srcFile.delete();//删除原图

}

} catch (Exception e) {

e.printStackTrace();

}

public static String getExtension(String srcImageFile) {

String ext = null;

if(srcImageFile!=null && srcImageFile.lastIndexOf(".")>-1){

ext = srcImageFile.substring(srcImageFile.lastIndexOf(".")+1);

}

return ext;

}

步骤3：

至此，截图文件就被保存到指定的文件夹下，相对路径也会被存到数据库中，在页面上的处理就是把需要展现的img转变成src接可以完成了。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。