springboot+html头像剪切与修改

最新推荐文章于 2024-06-14 19:52:58 发布

多放香菜_

最新推荐文章于 2024-06-14 19:52:58 发布

阅读量638

点赞数 2

分类专栏： java学习文章标签：笔记

本文链接：https://blog.csdn.net/weixin_42182713/article/details/96862040

版权

java学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html页面

 <!--显示图片-->
<div class="form_common" style="height: 150px">
        <div class="ibox-content">
            <div class="row">
                <div id="crop-avatar" class="col-md-6">
                    <div class="avatar-view" title="更新头像">
                        <img th:src="@{/images/qq/{Avatar}(Avatar=${user.Avatar})}" alt="headPicture" style="height: 100px;width: 100px;border-radius:50%">
                    </div>
                </div>
            </div>
        </div>
         <!--弹出图片上传框框-->
<div class="modal fade" id="avatar-modal" aria-hidden="true"
     aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="avatar-form" th:action="@{/h5upload}"
                      enctype="multipart/form-data" method="post">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" type="button">&times;</button>
                    <h4 class="modal-title" id="avatar-modal-label">Change Logo
                        Picture</h4>
                </div>
                <div class="modal-body">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <input class="avatar-src" name="avatar_src" type="hidden">
                            <input class="avatar-data" name="avatar_data" type="hidden">
                            <label for="avatarInput">图片上传</label> <input
                                class="avatar-input" id="avatarInput" name="avatar_file"
                                type="file">
                        </div>
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="avatar-preview preview-lg"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                        <div class="row avatar-btns">
                            <div class="col-md-9">
                                <div class="btn-group">
                                    <button class="btn" data-method="rotate" data-option="-90"
                                            type="button" title="Rotate -90 degrees">
                                        <i class="fa fa-undo"></i> 向左旋转
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn" data-method="rotate" data-option="90"
                                            type="button" title="Rotate 90 degrees">
                                        <i class="fa fa-repeat"></i> 向右旋转
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <input type="submit" value="保存修改">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>

controller页面

package com.hhsj.FreeBird.controller;

import com.alibaba.fastjson.JSONObject;
import com.hhsj.FreeBird.pojo.Userinfo;
import com.hhsj.FreeBird.service.UserInfoService;
import com.hhsj.FreeBird.util.JsonResult;
import net.coobird.thumbnailator.Thumbnails;
import net.coobird.thumbnailator.Thumbnails.Builder;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.File;
import java.util.UUID;

//import org.springframework.web.multipart.commons.CommonsMultipartFile;

@Controller
public class UploadController {

    /**
     * 头像上传
     *
     * @param file    图片的基本信息
     * @param fileCut 前台剪切图片的基本信息
     * @param request
     * @return
     */

    @Resource
    private UserInfoService userInfoService;
    @RequestMapping("/h5upload")
    @PostMapping("/h5upload")
    @ResponseBody
    public JsonResult h5upload(
            @RequestParam(value = "avatar_file", required = true) MultipartFile file,
            @RequestParam(value = "avatar_data", required = true) String fileCut,
             HttpSession session) {
        JsonResult jsonResult = new JsonResult();
        try {
            //获取根目录
            File path = new File(ResourceUtils.getURL("classpath:").getPath());
            if (!path.exists()) {path = new File("");}
            //上传目录为/static/images/upload/
            //在开发测试模式时，得到的地址为：{项目跟目录}/target/static/images/qq/
            //在打包成jar正式发布时，得到的地址为：{发布jar包目录}/static/images/qq/
            File root = new File(path.getAbsolutePath(), "static/images/qq/");
            if (!root.exists()) root.mkdirs();

            String orgFileName = file.getOriginalFilename();// 获取图片的名字
            String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(orgFileName);
            File targetFile = new File(root, fileName);

            //multipartfile 转 File对象
            CommonsMultipartFile cf = (CommonsMultipartFile) file;
            DiskFileItem fi = (DiskFileItem) cf.getFileItem();
            File f = fi.getStoreLocation();
            file.transferTo(f);
            // JSON的对象格式的字符串转换成json数据
            JSONObject json = JSONObject.parseObject(fileCut);
            String x = json.get("x").toString();
            String y = json.get("y").toString();
            String width = json.get("width").toString();
            String height = json.get("height").toString();
            // 下面的要的数据时int类型，把小数去掉
            if (x.indexOf(".") > -1) {
                x = x.substring(0, x.indexOf("."));
            }
            if (y.indexOf(".") > -1) {
                y = y.substring(0, y.indexOf("."));
            }
            if (width.indexOf(".") > -1) {
                width = width.substring(0, width.indexOf("."));
            }
            if (height.indexOf(".") > -1) {
                height = height.substring(0, height.indexOf("."));
            }

            // 剪切图片
            BufferedImage image = ImageIO.read(f);
            image = image.getSubimage(Integer.parseInt(x), Integer.parseInt(y), Integer.parseInt(width),
                    Integer.parseInt(height));

            // 压缩边长为100的正方形, 生成图片 到指定的位置
            Builder<BufferedImage> builder = null;
            builder = Thumbnails.of(image).size(100, 100);
            builder.toFile(targetFile);

            //更新用户头像
            jsonResult.setFlag(true);
            jsonResult.setResult("images/qq/" + fileName);
            Userinfo user = (Userinfo) session.getAttribute("user");
            user.setAvatar(fileName);
            userInfoService.update(user);

        } catch (Exception e) {
            jsonResult.setFlag(false);
            e.printStackTrace();
        }
        return jsonResult;
    }
}

工具类

package com.hhsj.FreeBird.util;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;

/**
 * Created by JacksonYee on 2019/7/18.
 */
@Configuration
public class BaseConfig {
    @Bean(name = "multipartResolver")
    public MultipartResolver multipartResolver(){
        CommonsMultipartResolver resolver = new CommonsMultipartResolver();
        resolver.setDefaultEncoding("UTF-8");
        resolver.setResolveLazily(true);//resolveLazily属性启用是为了推迟文件解析，以在在UploadAction中捕获文件大小异常
        resolver.setMaxInMemorySize(40960);
        resolver.setMaxUploadSize(50*1024*1024);//上传文件大小 50M 50*1024*1024
        return resolver;
    }

}

package com.hhsj.FreeBird.util;

public class JsonResult {
	private String msg;
	private String result;
	private boolean flag;

	public String getResult() {
		return result;
	}

	public void setResult(String result) {
		this.result = result;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public boolean isFlag() {
		return flag;
	}

	public void setFlag(boolean flag) {
		this.flag = flag;
	}

	public JsonResult() {
		super();
	}

	public JsonResult(String msg, String result, boolean flag) {
		super();
		this.msg = msg;
		this.result = result;
		this.flag = flag;
	}

}

package com.hhsj.FreeBird.util;

import net.coobird.thumbnailator.Thumbnails;
import net.coobird.thumbnailator.Thumbnails.Builder;
import net.coobird.thumbnailator.geometry.Positions;
import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

/**
 * 图片上传工具
 */
public class UploadUtil {

	/**
	 * 处理文件上传
	 *
	 * @param file
	 * @param basePath
	 *            图片要上传到的服务器路径
	 * @return
	 * @throws IOException
	 */
	public static String upload(MultipartFile file, String basePath) throws IOException {
		// 创建文件夹
		File uploadFile = new File(basePath);
		if (!uploadFile.exists()) {
			uploadFile.mkdirs();
		}
		String orgFileName = file.getOriginalFilename();//获取图片的名字
		String fileName = UUID.randomUUID().toString() + "." + FilenameUtils.getExtension(orgFileName);
		File targetFile = new File(basePath, fileName);

		// multipartfile 转 File对象
		CommonsMultipartFile cf = (CommonsMultipartFile) file;
		DiskFileItem fi = (DiskFileItem) cf.getFileItem();
		File f = fi.getStoreLocation();

		compressPicture(f, targetFile);
		// 下面这个是按比例压缩的，最后得到的图片可能不是正方形
		// Thumbnails.of(f).size(50, 50).toFile(targetFile);

		return fileName;
	}

	// 压缩至指定图片尺寸（例如：横50高50），保持图片不变形，多余部分裁剪掉
	public static void compressPicture(File fromPic, File toPic) throws IOException {
		BufferedImage image = ImageIO.read(fromPic);
		Builder<BufferedImage> builder = null;

		int imageWidth = image.getWidth();
		int imageHeitht = image.getHeight();
		if ((float) 50 / 50 != (float) imageWidth / imageHeitht) {
			if (imageWidth > imageHeitht) {
				image = Thumbnails.of(fromPic).height(50).asBufferedImage();
			} else {
				image = Thumbnails.of(fromPic).width(50).asBufferedImage();
			}
			builder = Thumbnails.of(image).sourceRegion(Positions.CENTER, 50, 50).size(50, 50);
		} else {
			builder = Thumbnails.of(image).size(50, 50);
		}
		builder.outputFormat("jpg").toFile(toPic);
	}
}

在启动类之前加上

@EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class})

多放香菜_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录