2020年5月29日

页面,使用第三方插件cropper.js裁剪,同时也引用vue.js、jquery-weui.js及样式

1.先引用对应的js与插件

 

<script src="/kd-vote/static/js/jquery-3.3.1.js"></script>
<script src="/kd-vote/static/vue.min.js"></script>

<link href="/kd-vote/static/css/jquery-weui.css" rel="stylesheet" />
<link href="/kd-vote/static/css/weui.css" rel="stylesheet" />
<script src="/kd-vote/static/js/jquery-weui.js"></script>


<link rel="stylesheet" href="/kd-vote/static/css/cropper.min.css">
<link rel="stylesheet" href="/kd-vote/static/css/ImgCropping.css">
<script src="/kd-vote/static/js/cropper.min.js"></script>

2.html body里对应的标签

 1 <div id="app">
 2 
 3 <div class="weui-cell">
 4 <div class="weui-cell__hd"><label class="weui-label">选择作品图片 <span style="color: red;">*</span> :</label></div>
 5 <div class="weui-cell__bd">
 6 <input class="weui-input" type="file" placeholder="请选择图片" ref ="uploadFile" v-on:change="change" accept="image/*" />
 7 </div>
 8 </div>
 9 <div class="weui-cell">
10 <div class="weui-cell__hd"><label class="weui-label">作品图片预览:</label></div>
11 <div class="weui-cell__bd">
12 <img v-bind:src="imgSrc" v-if="imgSrc!=''" style=" max-width: 100%;"/>
13 <div style="min-height: 200px; width: 100%; border: 1px solid lightgray;" v-else></div>
14 </div>
15 </div>
16 <div class="weui-btn-area">
17 <a class="weui-btn weui-btn_primary" href="#" id="submitButton" @click="submitInfo">提交</a>
18 </div>
19 
20 <div style="display: none" class="tailoring-container">
21 <div class="black-cloth" @click="closeTailor(this)"></div>
22 <div class="tailoring-content">
23 <div class="tailoring-content-one">
24 
25 <div class="close-tailoring" @click="closeTailor(this)">×</div>
26 </div>
27 
28 <div class="tailoring-content-two">
29 <div class="tailoring-box-parcel">
30 <img id="tailoringImg">
31 </div>
32 <div class="preview-box-parcel">
33 <p>图片预览:</p>
34 <div class="square previewImg"></div>
35 <!-- <div class="circular previewImg"></div>-->
36 </div>
37 </div>
38 
39 <div class="tailoring-content-three">
40 <button class="l-btn cropper-reset-btn">复位</button>
41 <button class="l-btn cropper-rotate-btn">旋转</button>
42 <button class="l-btn cropper-scaleX-btn">换向</button>
43 <button class="l-btn sureCut" id="sureCut">确定</button>
44 </div>
45 </div>
46 </div>
47 </div>
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<script type="text/javascript">
 
$(function(){
 
//实例化vue
var vue = new Vue({
el:"#app",
data:{
imgSrc:"",
ysuo:1,
 
},
 
mounted: function () {
var self = this;
//初始化cropper功能
self.cropping();
},
methods: {
//选择图片事件
change:function(e){
var self = this;
var file = e.target.files[0];
if(file){
var reads = new FileReader();
reads.readAsDataURL(file);
 
//弹出裁剪框
$(".tailoring-container").toggle();
 
reads.onload = function(a){
let img = new Image();
var replaceSrc = a.target.result;
// 更换cropper的图片
$('#tailoringImg').cropper('replace', replaceSrc, false);// 默认false,适应高度,不失真
//self.$refs.uploadFile.value = "";
 
};
 
}
else{
return;
}
 
},
compress:function(img) {
var self = this;
//
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
var imgWidth = img.width,
imgHeight = img.height;
 
ctx.fillStyle = '#fff';
 
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.fillRect(0, 0, imgWidth, imgHeight);
ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
 
if(self.ysuo>0 && self.ysuo<1)
return canvas.toDataURL('image/jpeg', self.ysuo);
else
return canvas.toDataURL('image/jpeg');
},
 
submitInfo:function(){
var self = this;
//这种格式的图片地址(请据据实际情况转换),self.imgSrc--> data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...........
var subData = {
imgFile:self.imgSrc
};
 
$.ajax({
type: 'post',
url: "url地址",
//contentType:false,
//processData:false,
data: JSON.stringify(subData),
dataType: "json",
contentType: 'application/json;charset=utf-8',
success: function (res) {
}
});
 
},
 
cropping: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 -100, "left" : 0 });
} else {
$(".tailoring-content").css({ "top" : (win_height - $(".tailoring-content") .outerHeight()) / 2, "left" : (win_width - $(".tailoring-content") .outerWidth()) / 2 });
}
 
 
var self = this;
// 初始化cropper图片裁剪
$('#tailoringImg').cropper({
viewMode:2,
aspectRatio : 3 / 4,// 比例
preview : '.previewImg',// 预览视图
guides : false, // 裁剪框的虚线(九宫格)
autoCropArea : 0.8, // 0-1之间的数值,定义自动剪裁区域的大小,默认0.8
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", 90);
});
// 复位
$(".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');// 获取被裁剪后的canvas
var base64 = cas.toDataURL('image/jpeg');
 
let img = new Image();
img.src = base64;
//设置截剪后的图片宽高(不设置,则是用默认宽高)
img.width = 750;
img.height =1000;
img.onload = function(){
 
//小于1m,不压缩
if(base64.length<1024*1024){
self.imgSrc = base64;
return ;
}
//设置一个压缩比例(具体请根据实际情况设置,)
self.ysuo = Math.floor(1024*1024/base64.length * 100) / 100;
 
//开始压缩
let data = self.compress(img);
//预览裁剪压缩后的图片
self.imgSrc = data;
};
self.closeTailor();// 关闭裁剪框
}
});
 
 
 
},
closeTailor:function(){
$(".tailoring-container").toggle();
}
 
}
});
 
});
</script>

  

 

posted @ 2020-05-29 18:04 天若有情天亦老,人间正道是沧桑 阅读(644) 评论(0) 推荐(0)

导航

< 2025年7月 >
29 30 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 1 2
3 4 5 6 7 8 9

统计

点击右上角即可分享
微信分享提示