html5选择图片裁剪+压缩后上传

页面，使用第三方插件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里对应的标签

<div id="app">

<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">选择作品图片 <span style="color: red;">*</span> :</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="file" placeholder="请选择图片" ref ="uploadFile" v-on:change="change" accept="image/*" />
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">作品图片预览:</label></div>
<div class="weui-cell__bd">
<img v-bind:src="imgSrc" v-if="imgSrc!=''" style=" max-width: 100%;"/>
<div style="min-height: 200px; width: 100%; border: 1px solid lightgray;" v-else></div>
</div>
</div>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="#" id="submitButton" @click="submitInfo">提交</a>
</div>

<div style="display: none" class="tailoring-container">
<div class="black-cloth" @click="closeTailor(this)"></div>
<div class="tailoring-content">
<div class="tailoring-content-one">

<div class="close-tailoring" @click="closeTailor(this)">×</div>
</div>

<div class="tailoring-content-two">
<div class="tailoring-box-parcel">
<img id="tailoringImg">
</div>
<div class="preview-box-parcel">
<p>图片预览：</p>
<div class="square previewImg"></div>
<!-- <div class="circular previewImg"></div>-->
</div>
</div>

<div class="tailoring-content-three">
<button class="l-btn cropper-reset-btn">复位</button>
<button class="l-btn cropper-rotate-btn">旋转</button>
<button class="l-btn cropper-scaleX-btn">换向</button>
<button class="l-btn sureCut" id="sureCut">确定</button>
</div>
</div>
</div>
</div>

<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>