关于前端: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 上传
// 拿到后展现或者上传给后端    
}

成果如图：