图片裁剪
<%--
Created by IntelliJ IDEA.
User: MSI-PC
Date: 2019/4/19
Time: 14:27
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<< html lang = " en" >
< head>
< meta charset = " UTF-8" >
< title> 基于cropper.js的图片裁剪</ title>
< meta name = " viewport" content = " width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" >
< meta name = " format-detection" content = " telephone=no" >
< link rel = " stylesheet" href = " /css/cropper.min.css" >
< link rel = " stylesheet" href = " /css/ImgCropping.css" >
</ head>
< body style =" background : #eee" >
< button id = " replaceImg" class = " l-btn" > 更换图片</ button>
< div style =" width : 320px; height : 320px; border : solid 1px #555; padding : 5px; margin-top : 10px" >
< img id = " finalImg" src = " " width = " 100%" >
</ div>
< div style =" display : none" class = " tailoring-container" >
< div class = " black-cloth" onclick = " closeTailor(this)" > </ div>
< div class = " tailoring-content" >
< div class = " tailoring-content-one" >
< label title = " 上传图片" for = " chooseImg" class = " l-btn choose-btn" >
< input type = " file" accept = " image/jpg,image/jpeg,image/png" name = " file" id = " chooseImg" class = " hidden" onchange = " selectImg(this)" >
选择图片
</ label>
< div class = " close-tailoring" onclick = " closeTailor(this)" > ×</ div>
</ div>
< div class = " tailoring-content-two" >
< div class = " tailoring-box-parcel" >
< img id = " tailoringImg" >
</ div>
< div class = " preview-box-parcel" >
< p> 图片预览:</ p>
< div class = " square previewImg" > </ div>
< div class = " circular previewImg" > </ div>
</ div>
</ div>
< div class = " tailoring-content-three" >
< button class = " l-btn cropper-reset-btn" > 复位</ button>
< button class = " l-btn cropper-rotate-btn" > 旋转</ button>
< button class = " l-btn cropper-scaleX-btn" > 换向</ button>
< button class = " l-btn sureCut" id = " sureCut" > 确定</ button>
</ div>
</ div>
</ div>
< script src = " http://www.jq22.com/jquery/jquery-1.10.2.js" > </ script>
< script src = " /js/cropper.min.js" > </ script>
< script>
( window. onresize = function ( ) {
var win_height = $ ( window) . height ( ) ;
var win_width = $ ( window) . width ( ) ;
if ( win_width <= 768 ) {
$ ( ".tailoring-content" ) . css ( {
"top" : ( win_height - $ ( ".tailoring-content" ) . outerHeight ( ) ) / 2 ,
"left" : 0
} ) ;
} else {
$ ( ".tailoring-content" ) . css ( {
"top" : ( win_height - $ ( ".tailoring-content" ) . outerHeight ( ) ) / 2 ,
"left" : ( win_width - $ ( ".tailoring-content" ) . outerWidth ( ) ) / 2
} ) ;
}
} ) ( ) ;
$ ( "#replaceImg" ) . on ( "click" , function ( ) {
$ ( ".tailoring-container" ) . toggle ( ) ;
} ) ;
function selectImg ( file) {
if ( ! file. files || ! file. files[ 0 ] ) {
return ;
}
var reader = new FileReader ( ) ;
reader. onload = function ( evt) {
var replaceSrc = evt. target. result;
$ ( '#tailoringImg' ) . cropper ( 'replace' , replaceSrc, false ) ;
}
reader. readAsDataURL ( file. files[ 0 ] ) ;
}
$ ( '#tailoringImg' ) . cropper ( {
aspectRatio: 1 / 1 ,
preview: '.previewImg' ,
guides: false ,
autoCropArea: 0.5 ,
movable: false ,
dragCrop: true ,
movable: true ,
resizable: true ,
zoomable: false ,
mouseWheelZoom: false ,
touchDragZoom: true ,
rotatable: true ,
crop: function ( e) {
}
} ) ;
$ ( ".cropper-rotate-btn" ) . on ( "click" , function ( ) {
$ ( '#tailoringImg' ) . cropper ( "rotate" , 45 ) ;
} ) ;
$ ( ".cropper-reset-btn" ) . on ( "click" , function ( ) {
$ ( '#tailoringImg' ) . cropper ( "reset" ) ;
} ) ;
var flagX = true ;
$ ( ".cropper-scaleX-btn" ) . on ( "click" , function ( ) {
if ( flagX) {
$ ( '#tailoringImg' ) . cropper ( "scaleX" , - 1 ) ;
flagX = false ;
} else {
$ ( '#tailoringImg' ) . cropper ( "scaleX" , 1 ) ;
flagX = true ;
}
flagX != flagX;
} ) ;
$ ( "#sureCut" ) . on ( "click" , function ( ) {
if ( $ ( "#tailoringImg" ) . attr ( "src" ) == null ) {
return false ;
} else {
var cas = $ ( '#tailoringImg' ) . cropper ( 'getCroppedCanvas' ) ;
var base64url = cas. toDataURL ( 'image/png' ) ;
$ ( "#finalImg" ) . prop ( "src" , base64url) ;
closeTailor ( ) ;
}
} ) ;
function closeTailor ( ) {
$ ( ".tailoring-container" ) . toggle ( ) ;
}
</ script>
</ body>
</ html>