关于前端:vue移动端也好用的图片裁剪工具vuecropperh5

文档及应用办法十分具体：https://gitee.com/JuLizhanzha...

我应用的时候对它的款式和应用办法进行了一些优化：

// 优化扭转cropper的调起形式 <img class="uploadBtn" src="../assets/img/upload.png" @click="cropperUpload"> <div class="cropper">    <H5Cropper        ref="h5Cropper"        :option="option"        @getFile="getFile"    /></div>// 款式，设置cropper区域的宽高为0，不再像文档里通过图片笼罩来执行点击.cropper {    width: 0;    height: 0;    line-height: 80px;    position: absolute;    top: 0;    left: 0;}// h5cropper款式问题，局部浏览器底部导航会挡住确定和勾销按钮div.btndiv {    position: fixed;    bottom: 10vh;    width: 80%;    left: 50%;    transform: translateX(-50%);}// js局部cropperUpload() {    // 点击H5Cropper里的上传文件，不再像文档里通过图片笼罩来执行点击    document.querySelector('input.upbtn').click();},// 获取裁剪后的文件，它自身也有base64、blob格式文件的事件回调，十分不便getFile(file) {// 这里的file和input标签的 inputDom.files[0]是一个意思，cropper外面用的也是input上传// 拿到后展现或者上传给后端    }

成果如图：