cropper本地预览裁剪，上传到服务器

最新推荐文章于 2024-02-28 14:15:24 发布

VIP文章 mfc2003

最新推荐文章于 2024-02-28 14:15:24 发布

阅读量1.9w

点赞数

分类专栏：前端 java

本文链接：https://blog.csdn.net/mfc2003/article/details/49835705

版权

坑爹啊，搞了2天，主要是昨天一直在搞 jcrop，这玩意不能缩放图片。

如果容器定为600px ，从本地选一张大于600px的图片，那么到容器里会压缩， scrop获取不到图片的真实位置，导致上传到后台后，后台裁剪的图片不对

今天重新用cropper搞，终于搞好了。

步骤：

1 通过本地选择图片，预览，通过选取框，选取一个正方形区域（可以设置大小和形状）

2 本地获取左顶点坐标(x,y)，和宽度高度 4个参数

3 然后通过 form表单提交到后台即可

4 后台先把源文件存放，然后通过一个工具类把源文件根据这4个参数裁剪，生成一张图片，

5 我这里是通过 jquery form。js 提交，根据后台返回的json 关闭弹出框，并且把头像 src改为新设置的

效果:

前端源代码:

<pre>

<%@page import="org.w3c.dom.Document"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";

%>

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<base href="<%=basePath%>">


<link rel="stylesheet" href="components/FontAwesome4.4/css/font-awesome.min.css">
<link rel="stylesheet" href="components/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="components/cropper/dist/cropper.css">


<link rel="stylesheet" href="css/main_leftmenu01.css">


<link rel="stylesheet" href="css/cutUserFace.css">



<script src="js/jquery.min.js"></script>
<script src="components/bootstrap/js/bootstrap.min.js"></script>

<script src="components/cropper/dist/cropper.js"></script>




<script src="js/main_leftmenu01.js"></script>

<script src="js/jquery-form.js"></script>
<script src="components/layer2/layer/layer.js"></script>

<script language="JavaScript">

/* 跳出iframe */
if (window != top)

{
top.location.href = location.href;

//parent.location.reload();

}

</script>






<style type="text/css">

body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
max-height: 100%;
}

a {
color:#ffffff;
}

a:visited {
color:#ffffff;
text-decoration: none;
}

a:active {
color:#ffffff;
text-decoration: none;
}
/* hover一定要放在最后面*/
a:hover {
color:#ffffff;
text-decoration: none;
}

/* 主界面 top */
#toptitle {
position: absolute;
top: 0;
left: 0;
height: 100px;
color: #ffffff;
width: 100%;
overflow: hidden;
vertical-align: middle;
background-color: #317eb4;
}

/* 左边菜单 */
#leftmenu {
position: fixed;
top: 100px;
left: 0;
height: 100%;
width: 180px;
overflow: auto;
vertical-align: top;
background-color: #585858;
}

/* 右边内容iframe容器 */
#maincontent {
position: fixed;
left: 180px;
top: 100px;
right: 0;
bottom: 0;
height: 100%;
overflow: auto;
background: #fff;
/* border-top: solid 1px #ea1718;
border-left: solid 1px #ea1718;*/
}

</style>

<script type="text/javascript" language="javascript">

//自动测算内容区域的高度
function iFrameHeight() {
var ifm = document.getElementById("content");
var subWeb = document.frames ? document.frames["content"].document: ifm.contentDocument;
if (ifm != null && subWeb != null) {

ifm.height = subWeb.body.scrollHeight;

最低0.47元/天解锁文章

mfc2003

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
6
评论
cropper本地预览裁剪，上传到服务器

坑爹啊，搞了2天，主要是昨天一直在搞 jcrop，这玩意不能缩放图片。如果容器定为600px ，从本地选一张大于600px的图片，那么到容器里会压缩， scrop获取不到图片的真实位置，导致上传到后台后，后台裁剪的图片不对今天重新用cropper搞，终于搞好了。步骤： 1 通过本地选择图片，预览，通过选取框，选取一个正方形区域（可以设置大小和形状）
复制链接

扫一扫