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

成果如图：