cropper.js实现上传、裁剪、缩放图片

结构部分

<div class="cjphotouser" style="display: none;">
<div class="userimageboxuser">
<!--用户上传图片的显示canvas-->
<canvas id="cvsuser" ></canvas>
</div>
<!--完成裁剪后保存的canvas-->
<img src="#" alt="" class="corpperedPicImg" id="corpperedPicImg" />
<div class="clearfix btngroup">
<div class="leftbtn">
<span class="uploadimage"></span>
<!--图片上传按钮-->
<input type="file" id="picfile" class="uppicbtn"  name="picfile" onchange="changepic(this)" accept="image/*">
</div>
<div class="rightbtn saveimage"></div>
</div>
</div>

js部分

//上传完成后，显示图片
function changepic(that){
var fileSize = that.files[0].size;
var size = fileSize / 1024;
var cale = DPR();
//限制照片大小不得超过5M
if(size<5000){
//判断移动端设备，点击上传时允许拍照或从相册中选取图片
if (getIos()) {
document.getElementById('picfile').removeAttribute("capture");
document.getElementById('qrfile').removeAttribute("capture");
};
if(this.value==''){
hasFile = false;
}else{
hasFile = true;
}

if(cjType=='user'){
var readuser = new FileReader();
usersF = document.getElementById('picfile').files[0];

readuser.readAsDataURL(usersF);

readuser.onload = function(e) {
var userImage = new Image();
userImage.src = e.target.result;
userImage.onload = function(){
// 获取想要转换的 DOM 节点
var dom1 = document.querySelector('.userimageboxuser');
var box1 = window.getComputedStyle(dom1);

var oWidth = userImage.width/2;
var oHeight = userImage.height/2;

// DOM 节点计算后宽高
var width1 = parseValue(box1.width);
var height1 = parseValue(box1.height);

// 获取像素比
var scaleBy1 = DPR();

var canvas2 =
1b5d8
document.getElementById("cvsuser");
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比

canvas2.width = width1 * scaleBy1;
canvas2.height = height1 * scaleBy1;
// 设定 canvas css宽高为 DOM 节点宽高

canvas2.style.width = `${width1}px`;
canvas2.style.height = `${height1}px`;

// 获取画笔
var context1 = canvas2.getContext('2d');
//处理图片居中
context1.drawImage(userImage,  canvas2.width/2-oWidth, canvas2.height/2-oHeight);
var options = {
aspectRatio: 750 / 1334, //最终生成图片的常高比
viewMode:0, //0：没有限制;1:裁剪框必须在图片内移动；2：2图片 不全部铺满1；3：图片填充整个裁剪框
dragMode  :'move',//拖拽模式，只能移动裁剪框
responsive:true, //调整窗口大小时，重新渲染cropper
cropBoxResizable:false, //调整裁剪框大小
autoCropArea:1,  //自动裁剪面积大小和图片的对比
center:true,
cropBoxMovable :false, //是否允许移动裁剪框
autoCrop:true, //初始化时，自动生成裁剪框
background:true, //显示裁剪区域的背景方格
modal:false,
guides:true, //显示在裁剪框上方的虚线
highlight:true,
zoomOnWheel:true,  //是否可以通过移动鼠标放大图像
zoomOnTouch:true, //是否可以通过拖动触摸放大图像
zoomable:true,//是否允许放大图像
movable:true, //是否允许移动后面的图片
rotatable:true, //是否允许旋转图像
scalable:true,//是否允许缩放图像
resizable:true,
minContainerWidth:200,//容器的最小宽度
minContainerHeight:100,//容器的最小高度
minCropBoxWidth:100,//裁剪层的最小宽度
minCropBoxHeight:50,//裁剪层的最小高度
wheelZoomRatio:0.1, //鼠标移动图像时，定义缩放比例
};

if(cropperImg){
cropperImg.destroy();
}
cropperImg = new Cropper(canvas2, options);
layer.msg("请手动调整照片到合适大小和位置",{
time:5000
});
}
};
}
}else{
layer.msg("照片不能大于5M",{
time:4000
});
that.value="";
return false;
}
};