There is a problem that the front end needs to crop images and then upload them to the server

Of course, I can’t build my own wheels, so I found vue-Cropper, a very powerful and convenient plugin. The address is below

An elegant picture cropping plugin

Before this, we used element UI’s upload component to upload action directly, so it was a bit of a mistake when we first encountered it. ∑(゚ д ゚ blue) blue

  • A simple installation reference
NPM install vue-cropper yarn add vue-cropper Import {VueCropper} from within the component'vue-cropper'Components: {VueCropper,}, main.js import VueCropper from'vue-cropper'Vue.use(VueCropper) CDN using <script SRC ="/ / cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script>
Vue.use(window['vue-cropper'].default)
Copy the code
  • This is what it looks like on the page.
    <el-dialog :visible.sync="cropperDialogVisiable" width="640px" :close-on-click-modal="false" :show-close="false">
      <vue-cropper
        ref="cropper"// Dom hook to get binding properties and functions class="cropper"
        :img="cropperImg"// Crop the image source :can-scale=! "" load"// Whether the scroll wheel is allowed to zoom :auto-crop="true"// Whether screenshots are generated by default :fixed-box="true"// Whether to fix the size of the screenshot box"2"// Output ratio multiple :output-size="option.size"// Generate image quality :output-type="option.outputType"// Generate image format :center-box="option.centerBox"// Whether the screenshot box is limited to the image :fixed-number="[25, 14]"/> <div class="cropper-btn">
        <el-button type="primary" @click="confirm" :loading="load"</el-button> <el-button @click="cancel" :disabled="load"</el-button> </div> </el-dialog>Copy the code

  • In fact, the most important thing is the IMG attribute, using element UI can directly generate a Blob object can be used directly, but in the project uploads the component is the previous buddy encapsulated, so it is not convenient to change, so it is very useful

  • Just like ele. me, the packaged component contains UpImageBefore processing before uploading

The core code in the diagram is the circled part and we can't get the Blob object directly, but we can get the File object, which is the information that we selected to take an image and we can generate a Blob object from that selected imagelet blobData = new Blob([file],{type:'image\jpeg'}) enclosing cropperImg = window. URL. CreateObjectURL (blobData) at this point, our cutting machine can get the picture, attach a Blob object types of documentsCopy the code

A Blob of MDN

There is also a callback after clippingcropperImgSubmit(){
                this.$refs.crop.getcropblob (blob)=>{this.blob_ = blob}} This is a method given by Cropper to get a screenshot of the blob as follows:Copy the code

Here is the Blob of the screenshot

  • At this point, we are done with the image, and then need to upload, the back end uniformly receives the file file, so we need to generate a file based on the Blob of the image
            file = new window.File([this.blobmsg],fileList[0].name,{type:'image/png'})
Copy the code

Print it out as follows:Copy the code

  • Finally, we can do the normal upload operation.

This is the end, the content is not much, but the first time to solve this thing, or quite laborious, leave a note for myself, also hope to help read this article partners