手机端上传图片前进行裁剪手机端上传图片前进行裁剪

1.创建组件ImageCropper
需要安装lrz 这里使用npm安装 npm i lrz

.box { display: flex; position: relative; }.box-f1 { flex: 1; }.box-ac { align-items: center }.box-jc { justify-content: center }.box-ver { flex-direction: column }.cropper-page { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background-color: #fff; overflow: hidden; }.cover { color: #FFF; font-size: .4rem; background-color: rgba(0, 0, 0, 0.2); }.cropper-box { border: 1px dashed #FFF; }.cropper-img { position: absolute; z-index: -1; }input[type="file"] { opacity: 0; position: fixed; top: -1000px; left: -1000px; }.btn { font-size: .3rem; padding: .1rem .3rem; border: .02rem solid; color: #FFF; border-radius: .1rem; }.btn .sure { color: #45b795; }.container{ height:100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding-top:4rem; } .container img{ display:block; width:50%; float:left; } .setting{ position:fixed; width:100%; top:0; left:0; border-bottom:1px dashed #45b795; padding-bottom:.1rem; } .setting .line{ margin:0 .2rem; height:.75rem; color:#45b795; } .setting input{ display: block; height:.5rem; padding:0 .15rem; font-size:.32rem; border:1px solid #45b795; outline: none; } .setting .btn{ color:#FFF; margin:.1rem .5rem; width:2rem; height:.6rem; line-height:.6rem; font-size:.32rem; text-align: center; background-color: #45b795; border-radius:.1rem; }