1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <!doctype html>
<html>
<head>
<link href="/domo/cropper.min.css" rel="stylesheet">
<script src="/domo/lrz.bundle.js"></script>
<script src="/domo/cropper.min.js"></script>
</head>
<body>
<h1>Upload Demo</h1>
<input type="file" id='input'>
<button id="crop">Crop</button>
<div id="img-preview">
<img src="" id="showImage" alt=""/>
</div>
<script>
var $ = function(el){
return document.querySelector(el);
};
var result = $('#img-preview'),
preview = $('#showImage'),
cropOption = {
aspectRatio: 1 / 1,
guides: false,
cropBoxResizable: false,
cropBoxMovable: false,
dragCrop: false,
minContainerWidth: 200,
minContainerHeight: 200
},
cropper = null;
// 预览
$('#input').onchange = function (e) {
var file = this.files[0];
lrz(file,{width: 600})
.then(function (rst) {
preview.style.display = 'block';
preview.onload = function () {
cropper = new Cropper(preview,cropOption);
};
preview.src = rst.base64;
})
.catch(function (err) {
})
.always(function () {
});
};
// 裁剪
$('#crop').onclick = function(){
var img = new Image();
img.onload = function () {
$('body').appendChild(img);
// 销毁
cropper.destroy();
preview.style.display = 'none';
};
img.src = cropper
.getCroppedCanvas(cropOption, {
width: 200,
height: 200
})
.toDataURL("image/jpeg", 0.9);
};
</script>
</body>
</html>
|
