Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use vue-cropper to crop pictures in vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use vue-cropper to crop pictures in vue".

1. Installation: npm install vue-cropper

Or

Yarn add vue- cropper II. Use: import VueCropper from 'vue-cropper'

Set up the component:

Export default {components: {VueCropper}}

Insert in template: (outside a div is required to set the size of the plug-in display)

Data () {return {option: {img: 'imgUrl', / / img URL or base64 size: 1, outputType:' png' 3. Built-in method: default value of name function optional value img address of cropped picture empty url address / base64 / bloboutputSize clipped picture quality 10.1-1outputType cropped picture address jpg (jpg needs to be passed in jpeg) jpeg / png / web

Built-in method: call the plug-in through this.$refs.cropper.

This.$refs.cropper.startCrop () starts the screenshot (if no screenshot box is set, use this to start the screenshot box)

This.$refs.cropper.stopCrop () stops taking screenshots

This.$refs.cropper.clearCrop () clears the screenshot

This.$refs.cropper.getCropData () get screenshot information (get URL or base64 of screenshot)

/ / get base64 data of screenshots this.$refs.cropper.getCropData ((data) = > {/ / do something console.log (data)}) / / get blob data of screenshots this.$refs.cropper.getCropBlob ((data) = > {/ / do something console.log (data)}) 4. Use: select the picture to zoom in and out ↺ left rotation ↻ right rotation Upload pictures

Import {VueCropper} from 'vue-cropper'export default {name: "CropperImage", components: {VueCropper}, data () {return {show: this.visible, name: this.Name, previews: {}, option: {img:'', / / address of the cropped image outputSize: 1 / / cropping the quality of the generated picture (optional 0.1-1) outputType: 'jpeg', / / the format of the cropped generated picture (jpeg | | png | | webp) info: true, / / size information of the cropping box Image size information canScale: true, / / whether to allow scroll wheel scaling autoCrop: true, / / whether to generate screenshot box autoCropWidth: 300 by default, / / default screenshot box width autoCropHeight: 200, / / default screenshot box height fixed: true, / / whether to enable screenshot frame width and height fixed ratio fixedNumber: [1.5 1], / / the width-height ratio of the screenshot box full: true, / / false trims the picture according to the original scale Undistorted fixedBox: true, / / fixed screenshot box size It is not allowed to change canMove: false, / / whether the uploaded picture can be moved canMoveBox: true, / / whether the screenshot box can be dragged original: false, / / whether the uploaded picture is rendered according to the original scale centerBox: false, / / whether the screenshot box is restricted to the picture height: true / / whether to match the proportion of the dpr output of the device infoTrue: false, / / true to show the width and height of the real output image False shows the width and height of the screenshot frame maxImgSize: 3000, / / limits the maximum width and height of the picture enlarge: 1, / / the output ratio of the picture according to the screenshot box mode: '230px 150px' / / default rendering mode}} }, props: {visible: {type: Boolean, default: false}, Name: {type: String, default:''}}, watch: {visible () {this.show = this.visible}}, methods: {/ / initialization function imgLoad (msg) {} / / changeScale (num) {num = num | | 1 this.$refs.cropper.changeScale (num)}, / / rotate rotateLeft () {this.$refs.cropper.rotateLeft ()} to the left, / / rotate rotateRight () {this.$refs.cropper.rotateRight ()} to the right, / / Real-time preview function realTime (data) {this.previews = data} / / Select selectImg (e) {let file = e.target.files [0] if (! /\. (jpg | jpeg | png | JPG | PNG) $/ .test (e.target.value) {this.$message ({message: 'picture type requirements: jpeg, jpg, png', type: "error"}) Return false} / / converted to blob let reader = new FileReader () reader.onload = (e) = > {let data if (typeof e.target.result = 'object') {data = window.URL.createObjectURL (new Blob ([e.target.result]))} else {data = e.target.result} this.option .img = data} / / convert to base64 reader.readAsDataURL (file)} / / upload uploadImg (type) {let _ this = this if (type = = 'blob') {/ / get the blob data of the screenshot this.$refs.cropper.getCropBlob (async (data) = > {let formData = new FormData () FormData.append ('file', data, new Date (). GetTime () +' .png') / call axios upload let {data: res} = await _ this.$http.post (`${msBaseUrl} common-tools-web/file/upload/ image`, formData) if (res.code = 200) {_ this.$message ({message: res.desc) Type: "success"}) Let data = res.result let imgInfo = {name: data.name, id: data.id, url: data.url}; _ this.$emit ('uploadImgSuccess', imgInfo);} else {_ this.$message ({message:' file service exception, please contact the administrator!' , type: "error"})}. Cropper-content {display: flex; display:-webkit-flex; justify-content: flex-end;. Cropper-box {flex: 1; width: 100%; .cropper {width: auto; height: 300px;}. Show-preview {flex: 1 -webkit-flex: 1; display: flex; display:-webkit-flex; justify-content: center;. Footer-btn {overflow: hidden; border: 1px solid # 67c23a; background: # cccccc;}}. Footer-btn {margin-top: 30px; display: flex; display:-webkit-flex; justify-content: flex-end;. Scope-btn {display: flex; display:-webkit-flex Justify-content: space-between; padding-right: 10px;} .upload-btn {flex: 1;-webkit-flex: 1; display: flex; display:-webkit-flex; justify-content: center;} .btn {outline: none; display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer;-webkit-appearance: none; text-align: center -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0;-webkit-transition: 0.1s; transition: 0.1s; font-weight: 500; padding: 8px 15px; font-size: 12px; border-radius: 3px; color: # fff; background-color: # 409eff; border-color: # 409eff; margin-right: 10px;}}

Effect:

Thank you for reading, the above is the content of "how to use vue-cropper to cut pictures in vue". After the study of this article, I believe you have a deeper understanding of how to use vue-cropper to cut pictures in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.