使用bootstrap来模拟构建Cropper的官方网站
新建web动态工程CropperDemo
导入struts的jar包
commons-dbutils-1.4.jar
commons-fileupload-1.3.3.jar
commons-io-2.5.jar
commons-lang3-3.6.jar
commons-logging-1.1.3.jar
freemarker-2.3.26-incubating.jar
javassist-3.22.0-GA.jar
log4j-api-2.10.0.jar
ognl-3.1.15.jar
struts2-core-2.5.16.jar
在WebContent下创建js和css文件夹
js：bootstrap.js
cropper.js
jquery-3.1.0.min.js
main.js
css：bootstrap.css
cropper.css
font-awesome.css
main.css
在web.xml配置struts
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<display-name>CropperDemo</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<filter>
<filter-name>struts</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
在src下新建struts.xml并配置
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
"http://struts.apache.org/dtds/struts-2.5.dtd">
<struts>
<!-- 开发者模式 -->
<constant name="struts.devMode" value="true"></constant>
<!-- 开启动态方法调用 -->
<constant name="struts.enable.DynamicMethodInvocation" value="true"></constant>
<!-- 上传文件的最大限制 -->
<constant name="struts.multipart.maxSize" value="1048567"></constant>
<package name="CropperDemo" namespace="/" extends="struts-default">
<!-- 开启动态方法调用 -->
<global-allowed-methods>regex:.*</global-allowed-methods>
<action name="ImageAction_*" class="com.sikiedu.web.ImageAction" method="{1}">
<result name="success" type="stream">
<!-- 下载的方式 attachment会默认打开一个下载的框-->
<param name="contentDisposition">attachment;filename=${upName}</param>
<!-- action中流的名字 -->
<param name="inputName">inputStream</param>
<!-- 下载的缓存区的大小 -->
<param name="bufferSize">1024</param>
</result>
</action>
</package>
</struts>
新建com.sikiedu.web包下的ImageAction.java
package com.sikiedu.web;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.io.FileUtils;
import org.apache.struts2.ServletActionContext;
import org.apache.tomcat.util.codec.binary.Base64;
import com.opensymphony.xwork2.ActionSupport;
public class ImageAction extends ActionSupport {
// 文件
private File upload;
// 文件类型
private String uploadContentType;
// 文件名称
private String uploadFileName;
private String base64;
private String upName;
private InputStream inputStream;
public String getImage() throws Exception {
// 用base64格式保存图片
HttpServletRequest request = ServletActionContext.getRequest();
String dir = request.getRealPath("/upload");
File fileLocation = new File(dir);
if (!fileLocation.exists()) {
fileLocation.mkdir();
}
// 有了一个空白文件
if (base64.indexOf("jpeg") != -1) {
base64 = base64.replaceFirst("jpeg", "jpg");
}
// 文件名
upName = UUID.randomUUID().toString() + System.currentTimeMillis() + "." + base64.substring(11, 14);
// 将文件有用的数据保存下来 从22号以后都为有用的数据
String iconBase64 = base64.substring(22);
byte[] buffer = Base64.decodeBase64(iconBase64);
// 将字节数组写入文件中
FileOutputStream out = new FileOutputStream(dir + "/" + upName);
System.out.println(dir);
out.write(buffer);
// 关闭out流
out.close();
//图片下载
inputStream = ServletActionContext.getServletContext().getResourceAsStream("/upload/"+upName);
return "success";
}
// 保存图片
public String saveImage() throws Exception {
System.out.println(upload);
System.out.println(uploadContentType);
System.out.println(uploadFileName);
// 将文件保存到项目部署的位置
// 保存的路径
String path = ServletActionContext.getServletContext().getRealPath("/image");
// 如果路径不存在 手动创建
File file = new File(path);
if (!file.exists()) {
file.mkdir();
}
System.out.println(path);
// 保存的文件(文件拷贝的形式)
FileUtils.copyFile(upload, new File(file, uploadFileName));
return null;
}
public InputStream getInputStream() {
return inputStream;
}
public void setInputStream(InputStream inputStream) {
this.inputStream = inputStream;
}
public String getUpName() {
return upName;
}
public void setUpName(String upName) {
this.upName = upName;
}
public String getBase64() {
return base64;
}
public void setBase64(String base64) {
this.base64 = base64;
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
}
编写index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cropper AzurLane</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/cropper.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>
<script src="js/cropper.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<!-- bootstrap官方引入的资料 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
<!-- 头部 -->
<header class="navbar navbar-light">
<div class="container">
<!-- logo -->
<a class="navbar-brand" href="https://game.bilibili.com/blhx/">AzurLane</a>
<div>
<!-- 导航栏 -->
<nav class="nav justify-content-right">
<a class="nav-link" href="https://game.bilibili.com/blhx/">Docs</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">GitHub</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">Cropper.js</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">More</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">About</a>
</nav>
</div>
</div>
</header>
<!-- 大屏幕 -->
<div class="jumbotron bg-primary text-white">
<div class="container">
<!-- 一行两列 -->
<div class="row">
<!-- 文字 -->
<div class="col-md">
<h1>
AzurLane
<small class="h6">碧蓝航线</small>
</h1>
<p class="lead">https://game.bilibili.com/blhx</p>
</div>
<!-- 图片 -->
<div class="col-md">
<!-- 边框 -->
<div class="carbonads">
<span class="carbon-wrap">
<img src="image/head.jpg" style="height: 130px; width: 130px">
<a style="margin-top: -45px" class="carbon-text" href="https://game.bilibili.com/blhx">AzurLane~~即可出战</a>
</span>
</div>
</div>
</div>
</div>
</div>
<!-- 主体 -->
<div class="container">
<!-- 提示框 -->
<div id="alertWarning" class="alert alert-warning" style="display: display">
这是一个表面被71%的海水覆盖着的蓝色星球，
<a class="alert-link" href="https://game.bilibili.com/blhx/">碧蓝航线</a>
人类在这片碧蓝色之中出生、成长、孕育和发展属于自己的文明。
<button id="closeButton" type="button" class="close">
<span>x</span>
</button>
</div>
<!-- 两行 两列 -->
<div class="row">
<!-- 两列 9比3-->
<div class="col-md-9">
<div class="img-container">
<!-- 825 497 -->
<img id="image" src="image/helloworld.jpg">
</div>
</div>
<div class="col-md-3">
<!-- 预览 -->
<div>
<div class="img-preview preview-lg"></div>
<div class="img-preview preview-md"></div>
<div class="img-preview preview-sm"></div>
<div class="img-preview preview-xs"></div>
</div>
<!-- 裁剪框数据的显示 -->
<div class="docs-data">
<!-- X -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">X</label>
</span>
<input id="cropper-x" class="form-control" value="0" />
<span class="input-group-append">
<label class="input-group-text">px</label>
</span>
</div>
<!-- Y -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">Y</label>
</span>
<input id="cropper-y" class="form-control" value="0" />
<span class="input-group-append">
<label class="input-group-text">px</label>
</span>
</div>
<!-- Width -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">Width</label>
</span>
<input id="cropper-width" class="form-control" value="0" />
<span class="input-group-append">
<label class="input-group-text">px</label>
</span>
</div>
<!-- Height -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">Height</label>
</span>
<input id="cropper-height" class="form-control" value="0" />
<span class="input-group-append">
<label class="input-group-text">px</label>
</span>
</div>
<!-- Rotate -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">Rotate</label>
</span>
<input id="cropper-rotate" class="form-control" value="0" />
<span class="input-group-append">
<label class="input-group-text">deg</label>
</span>
</div>
<!-- ScaleX -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">ScaleX</label>
</span>
<input id="cropper-scaleX" class="form-control" value="0" />
</div>
<!-- ScaleY -->
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<label class="input-group-text">ScaleY</label>
</span>
<input id="cropper-scaleY" class="form-control" value="0" />
</div>
</div>
</div>
</div>
<div class="row">
<!-- 两列 -->
<!-- 工具栏 -->
<div class="col-md-9">
<!-- 裁剪框 -->
<div class="btn-group">
<button id="arrow-button" type="button" class="btn btn-primary">
<!-- <i class="fa fa-anchor" aria-hidden="true"></i> -->
<span class="fa fa-arrows"></span>
</button>
<button id="crop-button" type="button" class="btn btn-primary">
<span class="fa fa-crop"></span>
</button>
</div>
<!-- 放大与缩小 -->
<div class="btn-group">
<button id="search-plus-button" type="button" class="btn btn-primary">
<span class="fa fa-search-plus"></span>
</button>
<button id="search-minus-button" type="button" class="btn btn-primary">
<span class="fa fa-search-minus"></span>
</button>
</div>
<!-- 上下左右移动 -->
<div class="btn-group">
<button id="arrow-up-button" type="button" class="btn btn-primary">
<span class="fa fa-arrow-up"></span>
</button>
<button id="arrow-down-button" type="button" class="btn btn-primary">
<span class="fa fa-arrow-down"></span>
</button>
<button id="arrow-left-button" type="button" class="btn btn-primary">
<span class="fa fa-arrow-left"></span>
</button>
<button id="arrow-right-button" type="button" class="btn btn-primary">
<span class="fa fa-arrow-right"></span>
</button>
</div>
<!-- 旋转 -->
<div class="btn-group">
<button id="repeat-button" type="button" class="btn btn-primary">
<span class="fa fa-repeat"></span>
</button>
<button id="undo-button" type="button" class="btn btn-primary">
<span class="fa fa-undo"></span>
</button>
</div>
<!-- 翻转 -->
<div class="btn-group">
<button id="arrows-h-button" type="button" class="btn btn-primary">
<span class="fa fa-arrows-h"></span>
</button>
<button id="arrows-v-button" type="button" class="btn btn-primary">
<span class="fa fa-arrows-v"></span>
</button>
</div>
<!-- 是否显示裁剪框 -->
<div class="btn-group">
<button id="check-button" type="button" class="btn btn-primary">
<span class="fa fa-check"></span>
</button>
<button id="times-button" type="button" class="btn btn-primary">
<span class="fa fa-times"></span>
</button>
</div>
<!-- 锁定与解锁 -->
<div class="btn-group">
<button id="lock-button" type="button" class="btn btn-primary">
<span class="fa fa-lock"></span>
</button>
<button id="unlock-button" type="button" class="btn btn-primary">
<span class="fa fa-unlock"></span>
</button>
</div>
<!-- 刷新与销毁 -->
<div class="btn-group">
<button id="refresh-button" type="button" class="btn btn-primary">
<span class="fa fa-refresh"></span>
</button>
<button id="upload-button" type="button" class="btn btn-primary">
<span class="fa fa-upload"></span>
</button>
<button id="power-off-button" type="button" class="btn btn-primary">
<span class="fa fa-power-off"></span>
</button>
</div>
<!-- 获得图片 -->
<div class="btn-group docs-toggles">
<button id="getCroppedCanvas-button" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
<span>Get Cropped Canvas</span>
</button>
<button id="160-button" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
<span>160×90</span>
</button>
<button id="320-button" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">
<span>320×180</span>
</button>
</div>
<!-- 弹出框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cropped</h5>
<button id="close-icon" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modal-body" class="modal-body" style="margin: 0 auto"></div>
<div class="modal-footer">
<button id="close-button" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button id="down-button" type="button" class="btn btn-primary">下载图片</button>
</div>
</div>
</div>
</div>
<!-- getData -->
<button id="getData_button" type="button" class="btn btn-secondary">
<span class="docs-tooltip">Get Data</span>
</button>
<!-- setData -->
<button id="setData_button" type="button" class="btn btn-secondary">
<span>Set Data</span>
</button>
<!-- getContainerData -->
<button id="getContainerData_button" type="button" class="btn btn-secondary">
<span>Get Container Data</span>
</button>
<!-- getImageData -->
<button id="getImageData_button" type="button" class="btn btn-secondary">
<span>Get Image Data</span>
</button>
<!-- getCanvasData -->
<button id="getCanvasData_button" type="button" class="btn btn-secondary">
<span>Get Canvas Data</span>
</button>
<!-- setCanvasData -->
<button id="setCanvasData_button" type="button" class="btn btn-secondary">
<span>Set Canvas Data</span>
</button>
<!-- getCropBoxData -->
<button id="getCropBoxData_button" type="button" class="btn btn-secondary">
<span>Get CropBox Data</span>
</button>
<!-- setCropBoxData -->
<button id="setCropBoxData_button" type="button" class="btn btn-secondary">
<span>Set CropBox Data</span>
</button>
<!-- move to 0,0 -->
<button id="move_button" type="button" class="btn btn-secondary">
<span>Move To [0,0]</span>
</button>
<!-- zoom to 100% -->
<button id="zoom_button" type="button" class="btn btn-secondary">
<span>Zoom To 100%</span>
</button>
<!-- rotate -->
<button id="rotate_button" type="button" class="btn btn-secondary">
<span>Rotate 180</span>
</button>
<!-- scale -->
<button id="scale_button" type="button" class="btn btn-secondary">
<span>Scale(-2,-1)</span>
</button>
<textarea id="putData" class="form-control" type="text" rows="1" placeholder="get data to here or set data with this value"></textarea>
</div>
<div class="col-md-3 docs-toggles">
<!-- 裁剪框的比列 -->
<div class="btn-group">
<button id="l16_button" type="button" class="btn btn-primary">
<span>16:9</span>
</button>
<button id="l4_button" type="button" class="btn btn-primary">
<span>4:3</span>
</button>
<button id="l1_button" type="button" class="btn btn-primary">
<span>1:1</span>
</button>
<button id="l2_button" type="button" class="btn btn-primary">
<span>2:3</span>
</button>
<button id="free_button" type="button" class="btn btn-primary">
<span>free</span>
</button>
</div>
<!-- 视图模式 -->
<div class="btn-group">
<button id="VM0_button" type="button" class="btn btn-primary">
<span> VM0</span>
</button>
<button id="VM1_button" type="button" class="btn btn-primary">
<span> VM1</span>
</button>
<button id="VM2_button" type="button" class="btn btn-primary">
<span> VM2</span>
</button>
<button id="VM3_button" type="button" class="btn btn-primary">
<span> VM3</span>
</button>
</div>
<!-- 下拉选模板
<div class="dropdown dropup docs-options">
要加入data-toggle
<button type="button" class="btn btn-primary btn-block" data-toggle="dropdown">
<span>Toggle Options</span>
</button>
<ul class="dropdown-menu" aria-labelledby="toggleOptions">
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="" type="checkbox" checked="checked"/>
<label class="form-check-label">responsive</label>
</div>
</li>
</ul>
</div>
-->
<!-- 下拉选 -->
<div class="dropdown dropup docs-options">
<button type="button" class="btn btn-primary btn-block" data-toggle="dropdown">
<span>Toggle Options</span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="responsive_input" type="checkbox" checked="checked"/>
<label class="form-check-label">responsive</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="restore_input" type="checkbox" checked="checked"/>
<label class="form-check-label">restore</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="checkCrossOrigin_input" type="checkbox" checked="checked"/>
<label class="form-check-label">checkCrossOrigin</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="checkOrientation_input" type="checkbox" checked="checked">
<label class="form-check-label">checkOrientation</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="modal_input" type="checkbox" checked="checked"/>
<label class="form-check-label">modal</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="guides_input" type="checkbox" checked="checked">
<label class="form-check-label">guides</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="center_input" type="checkbox" checked="checked">
<label class="form-check-label">center</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="highlight_input" type="checkbox" checked="checked">
<label class="form-check-label">highlight</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="background_input" type="checkbox" checked="checked">
<label class="form-check-label">background</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="autoCrop_input" type="checkbox" checked="checked">
<label class="form-check-label">autoCrop</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="movable_input" type="checkbox" checked="checked">
<label class="form-check-label">movable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="rotatable_input" type="checkbox" checked="checked">
<label class="form-check-label">rotatable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="scalable_input" type="checkbox" checked="checked">
<label class="form-check-label">scalable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomable_input" type="checkbox" checked="checked">
<label class="form-check-label">zoomable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomOnTouch_input" type="checkbox" checked="checked">
<label class="form-check-label">zoomOnTouch</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="zoomOnWheel_input" type="checkbox" checked="checked">
<label class="form-check-label">zoomOnWheel</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="cropBoxMovable_input" type="checkbox" checked="checked">
<label class="form-check-label">cropBoxMovable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="cropBoxResizable_input" type="checkbox" checked="checked">
<label class="form-check-label">cropBoxResizable</label>
</div>
</li>
<li class="dropdown-item">
<div class="form-check">
<input class="form-check-input" id="toggleDragModeOnDblclck_input" type="checkbox" checked="checked">
<label class="form-check-label">toggleDragModeOnDblclck</label>
</div>
</li>
</ul>
</div>
<button class="btn btn-success btn-block">AzurLane</button>
</div>
</div>
</div>
<!-- 尾部 -->
<footer class="footer">
<div class="container">
<p class="heart"></p>
<nav class="nav justify-content-center">
<a class="nav-link" href="https://game.bilibili.com/blhx/">Lain</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">Joey</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">Trigger</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">SiKi</a>
<a class="nav-link" href="https://game.bilibili.com/blhx/">Sandy</a>
</nav>
</div>
</footer>
<input type="file" id="upload-input" style="display: none">
<form style="display:none" method="post" action="${pageContext.request.contextPath }/ImageAction_getImage">
<input type="text" id="base64-input" name="base64">
<input id="mysubmit-button" type="submit">
</form>
<script type="text/javascript">
$('#closeButton').on("click", function() {
$('#alertWarning').css("display", "none");
})
const image = document.getElementById("image");
//这个cropper初始化后，如果想改变里面的属性(不能在里面直接改变属性，因为这个cropper原有属性已经初始化了，你再改变这里面的属性是没有意义的)，
//只能先销毁这个cropper再创建一个新的cropper
var cropper = new Cropper(image, {
//裁剪框的比列
aspectRatio : NaN,
//视图的模式
viewMode : 3,
preview : ".img-preview",
//是否允许移动图片
//movable : false,
//是否允许缩放图片
//zoomable : false,
ready : function(e) {
},
cropstart : function(e) {
},
//每一帧都会调用
cropmove : function(e) {
},
cropend : function(e) {
},
crop : function(e) {
changeCropper();
},
});
var aspectRatio;
//l16_button
$('#l16_button').on("click", function() {
aspectRatio = 16/9;
destroyAndCreateCropper()
});
//l4_button
$('#l4_button').on("click", function() {
aspectRatio = 4/3;
destroyAndCreateCropper()
});
//l1_button
$('#l1_button').on("click", function() {
aspectRatio = 1/1;
destroyAndCreateCropper()
});
//l2_button
$('#l2_button').on("click", function() {
aspectRatio = 2/3;
destroyAndCreateCropper()
});
//free_button
$('#free_button').on("click", function() {
aspectRatio = NaN;
destroyAndCreateCropper()
});
var viewMode = 0;
//VM_button
$('#VM0_button').on("click", function() {
viewMode = 0;
destroyAndCreateCropper()
});
$('#VM1_button').on("click", function() {
viewMode = 1;
destroyAndCreateCropper()
});
$('#VM2_button').on("click", function() {
viewMode = 2;
destroyAndCreateCropper()
});
$('#VM3_button').on("click", function() {
viewMode = 3;
destroyAndCreateCropper()
});
//下拉选中的功能
var responsive = true;
$('#responsive_input').on("change", function() {
responsive = !responsive;
destroyAndCreateCropper()
});
var restore = true;
$('#restore_input').on("change", function() {
restore = !restore;
destroyAndCreateCropper()
});
var checkCrossOrigin = true;
$('#checkCrossOrigin_input').on("change", function() {
checkCrossOrigin = !checkCrossOrigin;
destroyAndCreateCropper()
});
var checkOrientation = true;
$('#checkOrientation_input').on("change", function() {
checkOrientation = !checkOrientation;
destroyAndCreateCropper()
});
var modal = true;
$("#modal_input").on("change",function(){
modal = !modal;
destroyAndCreateCropper();
})
var guides = true;
$("#guides_input").on("change",function(){
guides = !guides;
destroyAndCreateCropper();
})
var center = true;
$("#center_input").on("change",function(){
center = !center;
destroyAndCreateCropper();
})
var highlight = true;
$("#highlight_input").on("change",function(){
highlight = !highlight;
destroyAndCreateCropper();
})
var background = true;
$("#background_input").on("change",function(){
background = !background;
destroyAndCreateCropper();
})
var autoCrop = true;
$("#autoCrop_input").on("change",function(){
autoCrop = !autoCrop;
destroyAndCreateCropper();
})
var movable = true;
$("#movable_input").on("change",function(){
movable = !movable;
destroyAndCreateCropper();
})
var rotatable = true;
$("#rotatable_input").on("change",function(){
rotatable = !rotatable;
destroyAndCreateCropper();
})
var scalable = true;
$("#scalable_input").on("change",function(){
scalable = !scalable;
destroyAndCreateCropper();
})
var zoomable = true;
$("#zoomable_input").on("change",function(){
zoomable = !zoomable;
destroyAndCreateCropper();
})
var zoomOnTouch = true;
$("#zoomOnTouch_input").on("change",function(){
zoomOnTouch = !zoomOnTouch;
destroyAndCreateCropper();
})
var zoomOnWheel = true;
$("#zoomOnWheel_input").on("change",function(){
zoomOnWheel = !zoomOnWheel;
destroyAndCreateCropper();
})
var cropBoxMovable = true;
$("#cropBoxMovable_input").on("change",function(){
cropBoxMovable = !cropBoxMovable;
destroyAndCreateCropper();
})
var cropBoxResizable = true;
$("#cropBoxResizable_input").on("change",function(){
cropBoxResizable = !cropBoxResizable;
destroyAndCreateCropper();
})
var toggleDragModeOnDblclck = true;
$("#toggleDragModeOnDblclck_input").on("change",function(){
toggleDragModeOnDblclck = !toggleDragModeOnDblclck;
destroyAndCreateCropper();
})
function destroyAndCreateCropper(){
//先销毁之前的cropper
cropper.destroy();
//再创建新的cropper
cropper = new Cropper(image,{
aspectRatio:aspectRatio,
viewMode:viewMode,
preview:".img-preview",
responsive:responsive,
restore:restore,
checkCrossOrigin:checkCrossOrigin,
checkOrientation:checkOrientation,
modal:modal,
guides:guides,
modal:modal,
highlight:highlight,
background:background,
autoCrop:autoCrop,
movable:movable,
rotatable:rotatable,
scalable:scalable,
zoomable:zoomable,
zoomOnTouch:zoomOnTouch,
zoomOnWheel:zoomOnWheel,
cropBoxMovable:cropBoxMovable,
cropBoxResizable:cropBoxResizable,
toggleDragModeOnDblclck:toggleDragModeOnDblclck,
crop : function(e) {
changeCropper();
},
})
};
//移动
$('#arrow-button').on("click", function() {
cropper.setDragMode("move");
});
//裁剪
$('#crop-button').on("click", function() {
cropper.setDragMode("crop");
});
//缩小
$('#search-minus-button').on("click", function() {
cropper.zoom(-0.1);
});
//放大
$('#search-plus-button').on("click", function() {
cropper.zoom(0.2);
});
//上
$('#arrow-up-button').on("click", function() {
cropper.move(0, -10);
});
//下
$('#arrow-down-button').on("click", function() {
cropper.move(0, 10);
});
//左
$('#arrow-left-button').on("click", function() {
cropper.move(-10, 0);
});
//右
$('#arrow-right-button').on("click", function() {
cropper.move(10, 0);
});
//順時針旋轉
$('#repeat-button').on("click", function() {
cropper.rotate(45);
});
//逆时针旋转
$('#undo-button').on("click", function() {
cropper.rotate(-45);
});
//横向翻转
$('#arrows-h-button').on("click", function() {
var x = cropper.getData().scaleX;
cropper.scaleX(-x);
});
//纵向翻转
$('#arrows-v-button').on("click", function() {
var y = cropper.getData().scaleY;
cropper.scaleY(-y);
});
//显示裁剪框
$('#check-button').on("click", function() {
cropper.crop();
});
//隐藏裁剪框
$('#times-button').on("click", function() {
cropper.clear();
});
//锁定
$('#lock-button').on("click", function() {
cropper.disable();
});
//解锁
$('#unlock-button').on("click", function() {
cropper.enable();
});
//刷新
$('#refresh-button').on("click", function() {
cropper.reset();
});
//导入 相对复杂
$('#upload-button').on("click", function() {
$('#upload-input').click();
});
//upload-input的change事件
$('#upload-input')
.on(
"change",
function() {
//这里替换图片 替换的只是图片的name而不是路径
//所以需要用struts来上传图片
/* 这里不能使用ajax的post请求来提交 post请求会改变数据
$.post(
//action的地址
"${pageContext.request.contextPath}/ImageAction_saveImage",
//提交的参数
{},
//回调函数
function(data){
},
//数据格式
"json"
)
*/
var form = new FormData();
form.append("upload", this.files[0]);
//XMLHttpRequest用于在后台与服务器交换数据
var xhr = new XMLHttpRequest();
var name = this.files[0].name;
//初始化一个请求
xhr.open("post","${pageContext.request.contextPath}/ImageAction_saveImage",true);
//当发送成功的时候回调的函数
xhr.onload = function() {
//在这个回调函数中this已经不能指代upload-input了
cropper.replace("image/" + name, false)
//alert("上传成功");
}
//发送请求 需要提交的数据
xhr.send(form);
});
//销毁
$('#power-off-button').on("click", function() {
cropper.destroy();
});
//得到裁剪后的图片
var width;
var height;
//获得图片
$("#getCroppedCanvas-button").on("click",function(){
//alert();
//获取裁剪框的长与宽
width=cropper.getCropBoxData().width;
height=cropper.getCropBoxData().height;
//接收参数（obtion） 输出html
$("#modal-body").append(cropper.getCroppedCanvas({width:width,height:height,maxWidth:466}));
})
//160*90的button
$("#160-button").on("click",function(){
width=160;
height=90;
$("#modal-body").append(cropper.getCroppedCanvas({width:width,height:height}));
})
//320*180的button
$("#320-button").on("click",function(){
width=320;
height=180;
$("#modal-body").append(cropper.getCroppedCanvas({width:width,height:height}));
})
//close-icon
$("#close-icon").on("click",function(){
$('#modal-body').empty();
})
//close-button
$("#close-button").on("click",function(){
$('#modal-body').empty();
})
//down-button
$("#down-button").on("click",function(){
//只能获取到base64编码的图片
var base64URL = cropper.getCroppedCanvas({width:width,height:height}).toDataURL("image/jpeg");
//将base64编码的字符串上传到imageAction
$('#base64-input').val(base64URL);
//通过表单去提交
$('#mysubmit-button').click();
})
var data;
var canvasData;
var cropBoxData;
//getData_button
$("#getData_button").on("click",function(){
var str = "({"+"x="+cropper.getData().x+","+"y="+cropper.getData().y+","+"width="+cropper.getData().width+","+"height="+cropper.getData().height+","+"rotate="+cropper.getData().rotate+","+"scaleX="+cropper.getData().scaleX+","+"scaleY="+cropper.getData().scaleY+"})";
data = cropper.getData();
$('#putData').text(str);
})
//setData_button
$("#setData_button").on("click",function(){
cropper.setData(data);
})
//getContainerData
$("#getContainerData_button").on("click",function(){
$('#putData').text("({"+"width:"+cropper.getContainerData().width+","+"height:"+cropper.getContainerData().height+"})");
})
//getImageData
$("#getImageData_button").on("click",function(){
var str = "({"+"left="+cropper.getImageData().left+","+"top="+cropper.getImageData().top+","+"width="+cropper.getImageData().width+","+"height="+cropper.getImageData().height+","+"naturalWidth="+cropper.getImageData().naturalWidth+","+"naturalHeight="+cropper.getImageData().naturalHeight+","+"aspectRatio="+cropper.getImageData().aspectRatio+","+"rotate="+cropper.getImageData().rotate+","+"scaleX="+cropper.getImageData().scaleX+","+"scaleY="+cropper.getImageData().scaleY+"})";
$('#putData').text(str);
})
//getCanvasData
$("#getCanvasData_button").on("click",function(){
var str = "({"+"left="+cropper.getCanvasData().left+","+"top="+cropper.getCanvasData().top+","+"width="+cropper.getCanvasData().width+","+"height="+cropper.getCanvasData().height+","+"naturalWidth="+cropper.getCanvasData().naturalWidth+","+"naturalHeight="+cropper.getCanvasData().naturalHeight+"})";
canvasData = cropper.getCanvasData();
$('#putData').text(str);
})
//setCanvasData
$("#setCanvasData_button").on("click",function(){
cropper.setCanvasData(canvasData);
})
//getCropBoxData
$("#getCropBoxData_button").on("click",function(){
var str = "({"+"left="+cropper.getCropBoxData().left+","+"top="+cropper.getCropBoxData().top+","+"width="+cropper.getCropBoxData().width+","+"height="+cropper.getCropBoxData().height+"})";
cropBoxData = cropper.getCropBoxData();
$('#putData').text(str);
})
//setCropBoxData
$("#setCropBoxData_button").on("click",function(){
cropper.setCropBoxData(cropBoxData);
})
//move_button 移动
$("#move_button").on("click",function(){
cropper.moveTo(0);
})
//zoom_button 放大
$("#zoom_button").on("click",function(){
cropper.zoomTo(1);
})
//rotate_button 旋转
$("#rotate_button").on("click",function(){
cropper.rotate(180);
})
//scale_button 拉伸
$("#scale_button").on("click",function(){
cropper.scale(-2,-1);
})
function changeCropper() {
$('#cropper-x').val(Math.round(cropper.getData().x));
$('#cropper-y').val(Math.round(cropper.getData().y));
$('#cropper-width').val(Math.round(cropper.getData().width));
$('#cropper-height').val(Math.round(cropper.getData().height));
$('#cropper-rotate').val(Math.round(cropper.getData().rotate));
$('#cropper-scaleX').val(Math.round(cropper.getData().scaleX));
$('#cropper-scaleY').val(Math.round(cropper.getData().scaleY));
}
</script>
</body>
</html>
最终效果展示
扫一扫
5790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
