使用cropper插件裁剪并上传图片(Spring mvc)
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。 cropper有两种方式上传截取的图片数据,一种是前端把裁剪的数据传到后台进行裁剪后保存,第二种是前端拿到剪裁后的数据,转成base64后上传, 后台通过二进制流上传图片信息,这里采用的是第二种方法。
1、下载cropper
下载地址:https://github.com/fengyuanchen/cropperjs/tree/master/dist
需要下载cropper.css 和cropper.js 两个文件
2、HTML代码
引用cropper.css 和cropper.js 两个文件,引用jquery文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="cropper.css" rel="stylesheet">
<style type="text/css">
.container {
width: 400px;
height:400px;
}
</style>
</head>
<body>
<div class="container">
<img id="image" src="test.png">
</div>
<button type="button" onclick="uploadCropImg()">生成</button> <script src="jquery.min.js"></script>
<script src="cropper.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('.container > img').cropper({
aspectRatio: 16 / 9,//截图比例
crop: function(data) {
// 出来裁切后的图片数据.
}
});
}); /* 上传裁剪之后的图片 **/
function uploadCropImg(){
var $image = $("#image");
var src = $image.eq(0).attr("src");
var canvasdata = $image.cropper("getCanvasData");
var cropBoxData = $image.cropper('getCropBoxData');
convertToData(src, canvasdata, cropBoxData, function (imgBase64Str){
imgBase64Str = imgBase64Str.replace("data:image/jpeg;base64," , "");
imgBase64Str = imgBase64Str.replace("data:image/png;base64," , "");
$.ajax({
type: "post",
url: "/项目名/imgCon/uploadCropImg.do",
data: {
imgBase64Str : imgBase64Str
},
success: function(data) {
if(data == "success"){
window.opener.cropImgSuccess();
}else{
alert("上传失败");
}
},error: function(request) {
alert("上传失败");
}
});
})
} /* 把裁剪完之后的图片转成base64字符串 **/
function convertToData(url, canvasdata, cropdata, callback) {
var cropw = cropdata.width; // 剪切的宽
var croph = cropdata.height; // 剪切的宽
var imgw = canvasdata.width; // 图片缩放或则放大后的高
var imgh = canvasdata.height; // 图片缩放或则放大后的高 var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置 var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'); canvas.width = cropw;
canvas.height = croph; var img = new Image();
img.src = url; img.onload = function() {
this.width = imgw;
this.height = imgh;
// 这里主要是懂得canvas与图片的裁剪之间的关系位置
ctx.drawImage(this, poleft, potop, this.width, this.height);
var base64 = canvas.toDataURL('image/jpg', 1); // 这里的“1”是指的是处理图片的清晰度(0-1)之间,当然越小图片越模糊,处理后的图片大小也就越小
callback && callback(base64) // 回调base64字符串
}
}
</script>
</body>
</html>
3、java代码(Controller)
package com.xwtec.controller; import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.annotation.Scope;
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 sun.misc.BASE64Decoder; @Controller
@Scope("prototype")
@RequestMapping("/imgCon")
public class ImgController { @RequestMapping(value = "/uploadCropImg.do", method=RequestMethod.POST)
public void uploadCropImg(HttpServletRequest request, HttpServletResponse response ,
@RequestParam(required=true) String imgBase64Str) throws IOException{
boolean flag = generateImage(imgBase64Str, "d://hhh.png");
if(flag){
response.getWriter().write("success");
}else{
response.getWriter().write("default");
}
} public static boolean generateImage(String imgStr, String path) {
if (imgStr == null)
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
byte[] b = decoder.decodeBuffer(imgStr);
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
OutputStream out = new FileOutputStream(path);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
} }
4、项目启动后,在html页面点击生成就可以保存图片,我这里是保存到D盘目录下。
使用cropper插件裁剪并上传图片(Spring mvc)的更多相关文章
- 利用cropper插件裁剪本地图片,然后将裁剪过后的base64图片上传至七牛云空间
现在做的项目需要做一些图片处理,由于时间赶急,之前我便没有处理图片,直接将图片放在input[type=file]里面,以文件的形式提交给后台,这样做简直就是最低级的做法,之后各种问题便出来了,人物头 ...
- IntelliJ IDEA上创建maven Spring MVC项目
IntelliJ IDEA上创建Maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...
- maven Spring MVC项目
IntelliJ IDEA上创建maven Spring MVC项目 各软件版本 利用maven骨架建立一个webapp 建立相应的目录 配置Maven和SpringMVC 配置Maven的pom.x ...
- 第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传
第三百九十节,Django+Xadmin打造上线标准的在线教育平台—Django+cropper插件头像裁剪上传 实现原理 前台用cropper插件,将用户上传头像时裁剪图片的坐标和图片,传到逻辑处理 ...
- 使用cropper插件进行图片裁剪 并上传
cropper插件的使用和 github地址: github 官方实例 我参考的中文文档: https://www.cnblogs.com/baka-sky/p/8001577.html 因为我是.n ...
- spring mvc 的上传图片是怎么实现的?
spring mvc 的上传图片是怎么实现的? 导入jar包,commons-io.jar 及 commons-fileupload.jar 在springmvc的配置文件中配置Mutipart解析器 ...
- 利用Spring MVC 上传图片文件
本文转自:http://amcucn.iteye.com/blog/264457.感谢作者 近日在工作当中,需要用到上传图片的功能,然而自己平时学习的时候只会使用struts的上传功能,但因为项目并没 ...
- spring mvc: log4j插件 log日志的输出
准备: log插件:log4j <!-- log日志插件 --> <!-- https://mvnrepository.com/artifact/log4j/log4j --> ...
- Spring MVC 学习总结(六)——Spring+Spring MVC+MyBatis框架集成
与SSH(Struts/Spring/Hibernate/)一样,Spring+SpringMVC+MyBatis也有一个简称SSM,Spring实现业务对象管理,Spring MVC负责请求的转发和 ...
随机推荐
- yum相关变量浅析
问题背景 同事发现一台centos7机器的yum repo不能使用,现象为相关的repo的meta文件下载失败,提示相关meta文件的下载路径有问题. 问题分析 通过终端输出的报错,发现是/etc/y ...
- Photoshop 更换证件照底色
1.打开photoshop CS6. 2.打开照片 (上栏)文件---->打开 或者,直接把照片拖进ps中. 3.复制图层 右击背景,点击复制图层 (复制图层的作用是,如果对图层操作错误,可以 ...
- STM32中ARM系列编译工具链的编译宏选择(__CC_ARM、__ICCARM__、__GNUC__、__TASKING__)
一 前言 stm32 f103中.关系到一个选择何种编译宏的问题.这里就梳理一下吧. 二 正文 1 在 core_cm3.h 文件中,有如下代码: #if defined ( __CC_ARM ) ...
- 五十六、SAP中LVC表格的常用布局属性LVC_S_LAYO
一.LVC_S_LAYO为表格常用的布局属性,包括网格线,宽度自适应,隐藏主键等 二.我们来对比使用前和使用后的表格,这个原始布局风格的表格 三.这个是设置了相关属性的表格
- jQuery原理系列-css选择器实现
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...
- 如何安装Anaconda
如何安装Anaconda Python作为一门易读.易维护的语言,在工作和学习中应用广泛,被大量用户所欢迎.本文主要给大家介绍一下Anaconda 步骤 1 Anaconda在官网就可以下载,网址:h ...
- springboot 自定义错误jsp页面
1.总览 2.application.properties spring.mvc.view.prefix=/WEB-INF/pages/ spring.mvc.view.suffix=.jsp#关闭w ...
- 如何下载Github的工程到本地,完成修改并提交
2019-02-22 对以下方法做了测试 可以生效 1 在Github上添加密钥 方法是:https://www.cnblogs.com/jason-beijing/p/9110187.html 2 ...
- zookeeper 安装及集群
一.zookeeper介绍 zookeeper是一个中间件,为分布式系统提供协调服务,可以为大数据服务,也可以为java服务. 分布式系统,很多计算机组成一个整体,作为一个整体一致对外并处理同一请求, ...
- Python 自省指南
原作者:Patrick K. O'Brien 什么是自省? 在日常生活中,自省(introspection)是一种自我检查行为.自省是指对某人自身思想.情绪.动机和行为的检查.伟大的哲学家苏格拉底将生 ...