<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cropper</title>
<!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
<link rel="stylesheet" href="css/cropper.css">
</head>
<body>
<div class="container">
<h1 class="page-header">Customize preview for Cropper</h1>
<div class="row">
<div class="col-sm-6">
<h3 class="page-header">Cropper</h3>
<div id="mycontainer">
<img class="img-responsive" id="image" src="1.jpg" alt="">
</div>
</div>
<div class="col-sm-6">
<h3 class="page-header">Result</h3>
<button type="button" class="btn btn-primary" id="button">Crop</button>
<div id="result"></div>
</div>
</div>
</div>
<!-- Scripts
<script src="js/bootstrap.min.js"></script>
-->
<script src="js/jquery.min.js"></script>
<script src="js/cropper.js"></script>
<script src="js/hammer.min.js"></script>
<script>
//手势监听控件
var $mycontainer= $('#mycontainer');//hammer.js
var $image = $('#image');//cropper.js
$(function () {
var $previews = $('.preview');
var $button = $('#button');
var $result = $('#result');
var croppable = false;
$image.cropper({
viewMode: 0, //移出边框
dragMode: 'none', //crop move none
autoCropArea: 1, //0~1 percent
restore: false, //true:缩小浏览器 图片也自适应缩小
guides: false, //true:cropbox内部虚线显示
highlight: false, //true:白色透明蒙版
cropBoxMovable: false,
cropBoxResizable: false,
zoomable:false,
//加载图片结束
built: function () {
croppable = true;
// var obj =$image.cropper('getCanvasData');//height width top left naturalHeight naturalWidth
//图片初始
$image.cropper('setCanvasData',{
"left":0,
"top":0
});
setMyCropBoxData();
},
build: function(){
}
});
$button.on('click', function () {
var croppedCanvas;
var roundedCanvas;
if (!croppable) {
return;
}
// Crop
croppedCanvas = $image.cropper('getCroppedCanvas');
// Show
$result.html('<img src="' + croppedCanvas.toDataURL() + '">');
//$result.html('<div>'+JSON.stringify($image.cropper('getCanvasData')));
});
});
/**
*设置自己定义的剪切图大小 mymove.js canvas绘制时也有调用
*/
function setMyCropBoxData(){
//容器大小
$(".cropper-container").css("width",window.innerWidth);
$(".cropper-container").css("height",300);
//设置剪切的大小位置
$image.cropper('setCropBoxData',{
"left":0,
"top":0,
"height":200,//如果图宽高小于200 则以图片的高度为准 cropper.js的bug
"width":200
});
//$(".cropper-crop-box").css("height",200); //对切图无效
//$(".cropper-crop-box").css("width",200); //对切图无效
}
</script>
<script src="js/mymove.js"></script><!-- 手势操作逻辑 -->
</body>
</html>
canvas 手势拖拽旋转放大 crop截取图片 头像上传高清版本 (Tomcat 测试)
3星 · 超过75%的资源 需积分: 15 105 浏览量
2016-04-18
17:59:29
上传
评论
收藏 137KB RAR 举报 
myfinal.rar （11个子文件） 
css 
bootstrap.min.css 118KB cropper.min.css 4KB cropper.css 5KB
1.jpg 41KB
mycroptest.html 3KB js jquery.min.js 95KB cropper.js 78KB bootstrap.min.js 36KB cropper.min.js 27KB hammer.min.js 19KB mymove.js 5KB资源评论
cggm2017-07-06不错的资源，谢谢分享- lzr772017-03-14是Tomat的用不了啊
maki0772017-04-30直接tomcat启动，把文件夹放进webapp里面，手机浏览器访问.... - lvzuoliao2016-08-24还挺错，可以拖拽，可以缩放！ maki0772017-01-13谢谢认可，笔者上次的前两个版本的资源，还被吐槽看不懂压缩的框架源码....
