Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how Vue achieves the function of cutting pictures. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Effect:

1), install vue-cropper

Npm install vue-cropper

2) write the .vue file cropper.vue should use mui for the project itself

Real name authentication

Confirm

Import {VueCropper} from 'vue-cropper' export default {data () {return {target: 0, cropperHelp: null, preview: null, / / basic configuration of the cropping component option option: {img:'' / / the address of the cropped image info: true, / / the size information of the clipping box outputSize: 1, / / the quality of the cropped image outputType: 'jpeg', / / the format of the cropped image canScale: false / / whether to allow the scroll wheel to zoom autoCrop: true, / / whether to generate screenshot box autoCropWidth: 800by default, / / whether to generate screenshot box width autoCropHeight: 500by default, and / / whether to generate screenshot box height fixedBox: false by default. / / fixed screenshot box size does not allow to change fixed: true, / / whether to enable screenshot frame width and height fixed ratio fixedNumber: [16,10], / / screenshot ratio full: false, / / whether to output screenshot canMoveBox: true of the original screenshot scale / / whether the screenshot box can be dragged original: false, / / whether the screenshot box is limited to the picture according to the original scale centerBox: true, / / whether the screenshot box is limited to the picture infoTrue: true / / true to show the width and height of the real output picture false shows the width and height of the screenshot box. }}, components: {VueCropper}, methods: {/ / zoom in / out changeScale (num) {console.log ('changeScale') num = num | | 1 This.$refs.cropper.changeScale (num);}, / / sit and rotate rotateLeft () {console.log ('rotateLeft') this.$refs.cropper.rotateLeft () }, / / right rotate rotateRight () {console.log ('rotateRight') this.$refs.cropper.rotateRight () }, / / Real-time preview functions realTime (data) {/ / this.previews = data}, imgLoad (msg) {console.log (msg)}, cropImage () {} OnSelect () {this.$refs.cropper.getCropBlob ((data) = > {/ / console.log ("data=== >", data) var img = window.URL.createObjectURL (data) This.$emit ("onCutingResoult", {img: img, target: this.target})} OnReset (param) {this.target = param.target this.option.img = param.url this.preview = param.url}, onBack () {this.$emit ("onCutingBack")} .mui-fullscreen {background: white } .cropperContent {width: 100%; height: 100%;} / *. Mui-fullscreen {background: # F2F2F2; top: 0remr; bottom: 0remr;} * / above is all the content of the article "how to achieve image clipping in Vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.