【vue】移动端也好用的图片裁剪工具vue-cropper-h5

文档及使用方法非常详细：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上传
// 拿到后展示或者上传给后端    
}

效果如图：