Cropper基本属性和方法
Cropper基本属性和方法以及使用struts来下载图片
导入struts相关jar包
c3p0-0.9.5.5.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
mchange-commons-java-0.2.19.jar
mysql-connector-java-8.0.16.jar
ognl-3.1.15.jar
struts2-core-2.5.16.jar
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>Cropper</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>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>struts</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
在WebContent下创建js和css文件夹
js文件夹导入cropper.js和jquery-3.1.0.min.js
css文件夹导入cropper.css
在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>
<package name="cropper" namespace="/" extends="struts-default">
<!-- 开启全部的动态方法调用 -->
<global-allowed-methods>regex:.*</global-allowed-methods>
<action name="ImageAction_*" class="com.sikiedu.web.ImageAction" method="{1}">
<result name="success">/success.jsp</result>
</action>
</package>
</struts>
新建com.sikiedu.web包下的ImageAction.java
package com.sikiedu.web;
import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.ServletActionContext;
import org.apache.tomcat.util.codec.binary.Base64;
import com.opensymphony.xwork2.ActionSupport;
public class ImageAction extends ActionSupport{
private String base64;
public String getImage() throws Exception {
System.out.println("我已经到达这里");
System.out.println(base64);
//将base64的数据放置到文件中保存起来
//获得一个路径来去存放我们的文件数据
HttpServletRequest request = ServletActionContext.getRequest();
String dir = request.getRealPath("/upload");
File fileLocation = new File(dir);
//若没有此路径 则创建此路径
if(!fileLocation.exists()) {
boolean created = fileLocation.mkdir();
if(!created) {
//若失败 一般不会有此结果
return null;
}
}
System.out.println("~~~~~~~");
//将jpeg改为jpg 若在base64中找到jpeg字符串则返回首字母索引 找不到则返回-1
if(base64.indexOf("jpeg") != -1) {
//将jpeg改为jpg
base64 = base64.replaceFirst("jpeg", "jpg");
}
//给文件命名 substring前闭后开
//为什么刚开始设置为jpeg？ 因为这个字符串替换 多的替换少的不出错如jpeg->jpg 但是少的替换成多的 jpg -> jpe(原本应该为jpeg的，但是只能替换三个字符) jpe格式电脑识别不出来
String upName = UUID.randomUUID().toString()+System.currentTimeMillis()+"."+base64.substring(11,14);
System.out.println(upName);
//给文件数据
//获取有用数据
String iconBase64 = base64.substring(22);
//io
//将base64编码格式的改为字节数组
byte[] buffer = Base64.decodeBase64(iconBase64);
//byte[] buffer = new Base64Decoder().decodeBuffer(iconBase64);
//将字节数组写入文件中
FileOutputStream out = new FileOutputStream(dir+"/"+upName);
System.out.println(dir);
out.write(buffer);
//关闭out流
out.close();
return null;
}
public String getBase64() {
return base64;
}
public void setBase64(String base64) {
this.base64 = base64;
}
}
success.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>success</h1>
</body>
</html>
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/cropper.css" rel="stylesheet">
<script src="js/cropper.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
</head>
<body>
<h1>Cropper</h1>
<div class="box">
<img id="image" src="helloworld.jpg">
</div>
<div class="small" style="overflow: hidden; width: 200px; height: 200px"></div>
<button id="reset">重置</button>
<button id="clear">清除</button>
<button id="replace">替换</button>
<button id="enable">解锁</button>
<button id="disable">锁定</button>
<button id="destroy">销毁</button>
<button id="movex">移动x</button>
<button id="movey">移动y</button>
<button id="moveTox">移动到x</button>
<button id="moveToy">移动到y</button>
<button id="zoomG">放大</button>
<button id="zoomS">缩小</button>
<button id="zoomToG">放大到</button>
<button id="zoomToS">缩小到</button>
<button id="rotateL">逆时针旋转</button>
<button id="rotateR">顺时针旋转</button>
<button id="rotateToL">逆时针旋转到</button>
<button id="rotateToR">顺时针旋转到</button>
<button id="scalex">沿y轴翻转</button>
<button id="scaley">沿x轴翻转</button>
<button id="scalexy">沿xy轴同时翻转</button>
<button id="scaleX">缩放图片x坐标</button>
<button id="scaleY">缩放图片y坐标</button>
<button id="getData">getData</button>
<button id="setData">setData</button>
<button id="getContainerData">getContainerData</button>
<!-- 没有这个set函数
<button id="setContainerData">setContainerData</button>
-->
<button id="getImageData">getImageData</button>
<button id="getCanvasData">getCanvasData</button>
<button id="setCanvasData">setCanvasData</button>
<button id="getCropBoxData">getCropBoxData</button>
<button id="setCropBoxData">setCropBoxData</button>
<!-- 重要 -->
<button id="getCroppedCanvas">getCroppedCanvas</button>
<button id="setAspectRatio">setAspecctRatio</button>
<button id="setDragMode">setDragMode</button>
<button id="getImage">得到图片</button>
<hr>
<div id="message"></div>
<script type="text/javascript">
const image = document.getElementById("image");
var cropper = new Cropper(image, {
// 裁剪框比列 1/1 长与宽的比列 NaN:任意比列
aspectRatio : 1 / 1,
//视图的模式
// 0:对裁剪框的移动没有限制 1:裁剪框不能超过图片
//2:裁剪框不能超过图片且图片高度和阴影背景高度一样 3:让图片完全填充阴影背景
viewMode : 2,
//开启预览效果
preview : '.small',
//拖拽模式move
dragMode : 'move',
//在调整窗口大小的时候。会重新选渲染cropper
responsive : true,
//在调整窗口大小的时候，恢复裁剪区域
restore : true,
//检查图片是否为跨域图片
checkCrossOrigin : true,
//是否开启遮罩,将未选中的地方，暗色处理
modal : true,
//是否显示裁剪的虚线
guides : true,
//将选中的区域亮色处理
highlight : true,
//是否显示网格背景
background : false,
//裁剪框是否在图片的中心
center : true,
//当初始化的时候，是否自动显示裁剪框
autoCrop : true,
//当初始化时，裁剪框的大小与原图的比例
autoCropArea : 0.8,
//是否允许移动图片
movable : false,
//是否允许旋转图片
rotatable : true,
//是否允许翻转图片
scalable : true,
//是否允许缩放图片
zoomable : true,
//是否可以通过触摸的形式来去放大图片(手机端)
zoomOnTouch : true,
//是否允许用鼠标来放大或缩小图片
zoomOnWheel : false,
//设置鼠标控制缩放的比例
wheelZoomRatio : 0.1,
//是否可以移动裁剪框
cropBoxMovable : true,
//是否可以调节裁剪框的大小
cropBoxResizable : false,
//设置dragMode是否可以相互切换,(双击鼠标进行切换)
toggleDragModeOnDblclick : true,
//设置Container的w与h
minContainerWidth : 0,
minContainerHeight : 200,
//设置canvas的w与h
minCanvasWidth : 0,
minCanvasHeight : 0,
//设置裁剪层
minCropBoxWidth : 0,
minCropBoxHeight : 100,
//当插件准备完成的时候，会执行此函数
ready : function(e) {
//alert("ready");
},
//当裁剪框开始移动的时候执行的函数
cropstart : function(e) {
//alert("start")
},
//裁剪框在移动的时候执行的函数（每一帧都会调用）
cropmove : function(e) {
//alert("move")
},
//裁剪框结束移动的时候，执行的函数
cropend : function(e) {
//alert("end")
},
//在裁剪框发生变化的时候，调用的函数
crop : function(e) {
//alert("crop")
},
})
$('#reset').on("click", function() {
//将图像以及裁剪框重置为初始状态
cropper.reset();
});
$('#clear').on("click", function() {
//清除裁剪框
cropper.clear();
});
$('#replace').on("click", function() {
//替换图片 第一个参数:替换的图片 第二个参数:boolean是否保持原来的比例
cropper.replace("head.jpg", false);
});
$('#enable').on("click", function() {
//解锁 裁剪框
cropper.enable();
});
$('#disable').on("click", function() {
//锁定 裁剪框
cropper.disable();
});
$('#destroy').on("click", function() {
//销毁cropper 并在图像中将整个cropper销毁(将插件销毁)
cropper.destroy();
});
$('#movex').on("click", function() {
//移动x坐标,移动图片
cropper.move(1, 0);
});
$('#movey').on("click", function() {
//移动y坐标 移动图片
cropper.move(0, 1);
});
$('#moveTox').on("click", function() {
//移动到x
cropper.moveTo(1, 0);
});
$('#moveToy').on("click", function() {
//移动到y
cropper.moveTo(0, 1);
});
$('#zoomG').on("click", function() {
//放大
cropper.zoom(0.1);
});
$('#zoomS').on("click", function() {
//缩小
cropper.zoom(-0.1);
});
$('#zoomToG').on("click", function() {
//放大到
cropper.zoomTo(1.5);
});
$('#zoomToS').on("click", function() {
//缩小到
cropper.zoomTo(0.5);
});
$('#rotateL').on("click", function() {
//逆时针 负数
cropper.rotate(-45);
});
$('#rotateR').on("click", function() {
//顺时针 正数
cropper.rotate(45);
});
$('#rotateToL').on("click", function() {
//逆时针旋转到 负数
cropper.rotateTo(-45);
});
$('#rotateToR').on("click", function() {
//顺时针旋转到 正数
cropper.rotateTo(45);
});
$('#scalex').on("click", function() {
//沿y轴翻转 y不变x为-1
cropper.scale(-1,1);
});
$('#scaley').on("click", function() {
//沿x轴翻转 x不变y为-1
cropper.scale(1,-1);
});
$('#scalexy').on("click", function() {
//x,y轴同时翻转
cropper.scale(-1);
});
$('#scaleX').on("click", function() {
//缩放图片x坐标 默认值为1
cropper.scaleX(0.5);
});
$('#scaleY').on("click", function() {
//缩放图片y坐标
cropper.scaleY(0.5);
});
$('#getData').on("click",function(){
//获取数据信息(裁剪框的数据)
console.log(cropper.getData());
$('#message').append(cropper.getData().toSource);
});
$('#setData').on('click',function(){
//设置裁剪框的数据
cropper.setData({width:300,height:100});
});
$('#getContainerData').on("click",function(){
//获取container数据
console.log(cropper.getContainerData());
$('#message').append(cropper.getContainerData().toSource);
});
// $('#setContainerData').on('click',function(){
//设置container数据
// cropper.setContainerData({width:500,height:500});
// });
$('#getImageData').on("click",function(){
//获取image数据
console.log(cropper.getImageData());
$('#message').append(cropper.getImageData().toSource);
});
$('#getCanvasData').on("click",function(){
//获取canvas数据
console.log(cropper.getCanvasData());
$('#message').append(cropper.getCanvasData().toSource);
});
$('#setCanvasData').on("click",function(){
//设置canvas数据
cropper.setCanvasData({left:0,top:0,width:200,height:200});
});
$('#getCropBoxData').on("click",function(){
//获取裁剪框的数据
console.log(cropper.getCropBoxData());
$('#message').append(cropper.getCropBoxData().toSource);
});
$('#setCropBoxData').on("click",function(){
//设置裁剪框的数据
cropper.setCropBoxData({left:100,top:100,width:200,height:200});
});
//重要
$('#getCroppedCanvas').on("click",function(){
//获得裁剪后的图片
$('#message').append(cropper.getCroppedCanvas());
});
$('#setAspectRatio').on("click",function(){
//修改裁剪框的长宽比
cropper.setAspectRatio(2/1);
});
$('#setDragMode').on("click",function(){
//设置拖拽模式 none crop move
cropper.setDragMode("crop")
});
$('#getImage').on("click",function(){
var base64url = cropper.getCroppedCanvas().toDataURL("image/jpeg");
$.post(
//action路径
"${pageContext.request.contextPath}/ImageAction_getImage",
//数据
{"base64":base64url},
//回调函数
function(data)
{
},
//数据格式
"json"
)
//alert(base64url);
});
</script>
</body>
</html>
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
