You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
2.4 KiB
94 lines
2.4 KiB
2 years ago
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
||
|
|
pageEncoding="UTF-8"%>
|
||
|
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>测试</title>
|
||
|
|
<%@ include file="/WEB-INF/oss/base/common/variable.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/base/common/resource_lib.jsp"%>
|
||
|
|
<%@ include file="/WEB-INF/oss/base/common/variable_js.jsp"%>
|
||
|
|
|
||
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.css" rel="stylesheet">
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.1/cropper.min.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
img {
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p>this is function Test</p>
|
||
|
|
|
||
|
|
<p> 图片上传 </p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input type="file" class="crop-picker-file"
|
||
|
|
id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"></div>
|
||
|
|
</div>
|
||
|
|
<div style="width: 300px;height: 300px;">
|
||
|
|
<img src="" id="target" />
|
||
|
|
</div>
|
||
|
|
<div id="preview-pane">
|
||
|
|
<div class="preview-container">
|
||
|
|
<img src="" id="cut_thumb"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="crop-operate">
|
||
|
|
<button class="crop-save" onclick="rotate()">旋转</button>
|
||
|
|
<button class="crop-save" onclick="saveImage()">保存</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var $image = document.getElementById('target');
|
||
|
|
var $copper ;
|
||
|
|
|
||
|
|
$('[type=file]').change(function(e) {
|
||
|
|
var file = e.target.files[0]
|
||
|
|
if(file.size>= 2*1024*1024){
|
||
|
|
alert("图片大于2M");
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
reader.onload=function(e){
|
||
|
|
$("#target").attr("src",e.target.result);
|
||
|
|
$copper.reset();
|
||
|
|
$copper.replace(e.target.result);
|
||
|
|
}
|
||
|
|
if(($('#target').attr('src').length) != 0){
|
||
|
|
$('#preview').show()
|
||
|
|
$('#preview-pane').show()
|
||
|
|
$('.crop-operate').show()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
$copper = new Cropper($image ,{
|
||
|
|
aspectRatio: 1 / 1,
|
||
|
|
cropBoxResizable: true
|
||
|
|
});
|
||
|
|
|
||
|
|
function saveImage(){
|
||
|
|
var $imgData = $copper.getCroppedCanvas({
|
||
|
|
maxWidth: 300,
|
||
|
|
maxHeight: 300
|
||
|
|
});
|
||
|
|
var dataurl = $imgData.toDataURL('image/jpeg');
|
||
|
|
$("#cut_thumb").attr("src",dataurl);
|
||
|
|
}
|
||
|
|
|
||
|
|
function rotate(){
|
||
|
|
$copper.rotate(45);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|