$('#upLoadImg1').on('change', function() {
if (document.getElementById("upLoadImg1").files.length === 0) {
return;
}
var oFile = document.getElementById("upLoadImg1").files[0];
if (!oFile) {
return;
}
var fileName = oFile.name;
var fileSize = oFile.size;
var fileType = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
if (fileType != '.jpg' && fileType != '.jpeg' && fileType != '.gif' && fileType != '.png' && fileType != '.bmp') {
alert("请选择jpg,png,gif,bmp格式的图片");
return;
}
if (fileSize > 2 * 1024 * 1024) {
alert('最大支持2MB的图片');
return;
}
var fileReader = new FileReader();
fileReader.readAsDataURL(oFile);
// 成功读取
fileReader.onload = function(e) {
// 显示弹窗
$('.cover').show();
// 将弹窗中的图片路径设置为选择的图片的base64
$('#Img1').attr('src', e.target.result);
// 裁切组件初始化
initJcrop();
};
});裁切在弹窗一显示的时候就应该初始化：
function initJcrop() {
$('#Img1').Jcrop({
onChange: updateCoords,
onSelect: updateCoords,
aspectRatio: 1,
boxWidth: 300,
boxHeight: 300
}, function() {
//弹窗中显示的图片尺寸
var bb = this.getBounds();
var bWidth = Number(bb[0]) / 2;
var bHeight = Number(bb[1]) / 2;
//设置初始选中裁切范围
this.setSelect([0, 0, bWidth, bHeight]);
//原始图片缩小比例
try {
wdthScale = $('#Img1')["0"].width / 222;
heightScale = $('#Img1')["0"].height / 238;
} catch (e) {}
jcrop_api = this;
});
}非常重要的一个坑是，在此之前要定义全局变量jcrop_api,widthScale和heightScale，2个scale变量用于记录选择的原始图片尺寸与在弹窗上展现尺寸的缩小/放大比例的，比如选择的是1024×768的图片，但是弹窗上展现的范围是222×238，这就需要将缩小的倍数记录下来，在裁切的重绘canvas的时候要乘以这个倍数，否则裁切的范围就是在这个222×236尺寸上裁切的，而不是原始图片的尺寸上裁切的。而前面的jcrop_api变量用于重新选择图片时要将上一次的裁切初始化组件destroy掉。
Jcrop组件中重要的事件:onChange和onSelect，用于确定裁切范围的坐标（尺寸），因此也非常重要，其实重绘canvas就是在这里面完成的。
function updateCoords(c) {
var img = document.getElementById('Img1');
var ctx = document.getElementById('myCanva').getContext('2d');
try {
wdthScale = wdthScale === 1 ? $('#Img1')["0"].width / 222 : wdthScale;
heightScale = heightScale === 1 ? $('#Img1')["0"].height / 238 : heightScale;
