<!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="./cropper/cropper.css">
<style>
.container {
max-width: 960px;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div style="width: 100%;overflow: hidden;">
<div class="container">
<div>
<img src="" id="image">
</div>
</div>
</div>
</div>
<div id="dpage" class="docs-buttons">
<a href="javascript:void(0);">
<input type="button" name="file" class="button" value="上传">
<input id="inputImage" type="file" accept="image/*" multiple />
</a>
<a href="javascript:void(0);" class="qx"><button id="clipBtn" data-method="getCroppedCanvas">截取图片</button></a>
</div>
<!-- Scripts -->
<script src="./jquery/jquery-1.12.4.min.js"></script>
<script src="./cropper/cropper.js"></script>
<script>
$(function () {
'use strict';
var console = window.console || { log: function () {} };
var $image = $('#image');
var options = {
dragMode:'move'
};
// Cropper
$image.cropper(options);
// Methods
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
var $target;
var result;
if ($this.prop('disabled') || $this.hasClass('disabled')) {
return;
}
if ($image.data('cropper') && data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
if (data.method === 'rotate') {
$image.cropper('clear');
}
result = $image.cropper(data.method, data.option, data.secondOption);
if (data.method === 'rotate') {
$image.cropper('crop');
}
switch (data.method) {
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
var base64url = result.toDataURL('image/jpeg');
$.post('/api/user/uploadImage',{img:base64url},function(data){
if(data.status){
console.log(data.info);
}
console.log(data.info);
},'json');
}
break;
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
});
// Keyboard
$(document.body).on('keydown', function (e) {
if (!$image.data('cropper') || this.scrollTop > 300) {
return;
}
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// Import image
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset').cropper('replace', blobURL);
$inputImage.val('');
} else {
window.alert('文件类型错误');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
});
</script>
</body>
</html>