java图片等比例缩略显示在页面

最新推荐文章于 2021-02-17 01:42:52 发布

cplock

最新推荐文章于 2021-02-17 01:42:52 发布

阅读量359

点赞数

分类专栏： 1 文章标签： java 图片 spring mvc

本文链接：https://blog.csdn.net/cplock/article/details/54950245

版权

1 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本次采用Thumbnailator来进行图片的等比例缩略（本项目的框架采用Spring MVC）
首先编写图片上传Service：

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

import org.springframework.stereotype.Service;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

@Service
public class UploadService {
    public String uploadImage(CommonsMultipartFile file, String uploadPath, String realUploadPath){
        InputStream is = null;
        OutputStream os = null;

        try {
            is = file.getInputStream();
            String des = realUploadPath+"/"+file.getOriginalFilename();
            os = new FileOutputStream(des);

            byte[] buffer = new byte[1024];
            while(is.read(buffer)>0){
                os.write(buffer);
            }

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if(is!=null){
                try {
                    is.close();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

            if(os!=null){
                try {
                    os.close();
                } catch (Exception e2) {
                    e2.printStackTrace();
                }
            }
        }
        return uploadPath+"/"+file.getOriginalFilename();
    }
}

然后我们进行缩略图Service的编写
通过使用Thumbnailator架包，我们只需要设置缩略图的宽度，高度就可以完成了。例如我们设置缩略图的高和宽都为100.然后调用Thumbnail.of函数生成缩略图。

import java.io.InputStream;

import org.springframework.stereotype.Service;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import net.coobird.thumbnailator.Thumbnails;
import net.coobird.thumbnailator.Thumbnails.Builder;

@Service
public class thumbnailService {
    public static final int WIDTH = 100;
    public static final int HEIGHT = 100;

    public String thumbnail(CommonsMultipartFile file, String uploadPath, String realUploadPath){
        try {
            String des = realUploadPath+"/thum_"+file.getOriginalFilename();
//          Thumbnails.of(file.getInputStream()).size(WIDTH, HEIGHT).toFile(des);
            Builder<? extends InputStream> thumbnail = Thumbnails.of(file.getInputStream());
            thumbnail.size(WIDTH, HEIGHT);
            thumbnail.toFile(des);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return uploadPath+"/thum_"+file.getOriginalFilename();
    }
}

我们通过获取上传文件的地址，和缩略图生成的文件地址，将他们显示在jsp页面中

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/")
public class ThumbnailAction {
    @Autowired
    private UploadService uploadService;
    @Autowired
    private thumbnailService thumbnialService;

    @RequestMapping(value="/thumbnail",method=RequestMethod.POST)
    public ModelAndView thumbnail(@RequestParam("image")CommonsMultipartFile file, HttpSession session) throws Exception{
        //相对路径
        String uploadPath = "/images";
        //绝对路径
        String realUploadPath = session.getServletContext().getRealPath(uploadPath);
        //原图访问路径
        String imageUrl = uploadService.uploadImage(file, uploadPath, realUploadPath);
        //缩略图访问路径
        String thumbImageUrl = thumbnialService.thumbnail(file, uploadPath, realUploadPath);;

        ModelAndView mav = new ModelAndView();
        mav.addObject("imageURL",imageUrl);
        mav.addObject("thumbImageURL", thumbImageUrl);

        mav.setViewName("thumbnail");
        return mav;

    }
}

以下为Jsp页面设计：
主页：index.jsp

<body>
    <div class="demo">
        <div class="dheader">
            <h2>--图片上传--</h2>
        </div>
        <div class="dbody">
            <form id="upload_form" enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/thumbnail">
                <h2>请选择上传图片</h2>
                <div>
                    <input type="file" name="image" id="image" />
                    <input type="submit" value="上传" />
                </div>
            </form>
        </div>
    </div>
</body>

上传返回界面thumbnail.jsp

<body>
    <h4>图片信息</h4>
    <hr/>
    <table width="100%">
        <tr>
            <td width="50%" align="center">
                <img src="${pageContext.request.contextPath}${imageURL}">
            </td>
            <td width="50%" align="center">
                <img src="${pageContext.request.contextPath}${thumbImageURL}">
            </td>
        </tr>
    </table>
    <a href="${pageContext.request.contextPath}">返回</a>
</body>