【 Vue 】 The mobile end is also easy to use image cropping tool Vue-Cropper – H5

Document and use method is very detail: https://gitee.com/JuLizhanzha…

I used it with some optimizations for its style and usage:

<img class="uploadBtn" SRC ="... /assets/img/upload.png" @click="cropperUpload"> <div class="cropper"> <H5Cropper ref="h5Cropper" :option="option" @getFile="getFile" /> </div> // style, set the cropper area width to 0, instead of the image overlay in the document to perform click.cropper {width: 0; height: 0; line-height: 80px; position: absolute; top: 0; left: 0; } // H5Cropper style issue, some browser bottom navigation blocks the set and cancel buttons div.btnDiv {position: fixed; bottom: 10vh; width: 80%; left: 50%; transform: translateX(-50%); } // Upload a file from H5Cropper {// Click document.querySelector('input.upbtn').click();} // Upload a file from H5Cropper (' H5Cropper ').click(); }, getFile(File) {// InputDom.files [0] is the same as inputDom.files[0]; CROPPER Upload // Show or upload to the back end}

The effect is as follows: