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

This article is about how vue uses plug-ins to cut images proportionally. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Use the plug-in-vueCropper

Install the plug-in: npm install vue-cropper

Combine the upload component of el-element

two。 Example:

Main page

Data () {return {formData: {currentBannerImg: ""}, isShowCropper: false,}}

You can only upload jpg, jpeg, png, and a single file does not exceed 10M// to upload images. After successful adjustment, crop async fileChangeBanner (file, fileList) {const fileType = file.name.substring (file.name.lastIndexOf (".") + 1); const fileTypeArr = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"]; if (fileTypeArr.indexOf (fileType))

< 0) { this.$alert("请上传格式为jpg、jpeg、png的图片！", "系统提示", { confirmButtonText: "确定" }); fileList.splice(fileList.length - 1); return; } // 大小限制 const isLt2M = file.size / 1024 / 1024 < this.$FileSize; if (!isLt2M) { this.$alert(`上传文件大小不能超过 ${this.$FileSize}MB！`, "系统提示", { confirmButtonText: "确定" }); fileList.splice(fileList.length - 1); return; } // 添加裁剪部分 this.isShowCropper = true; this.$nextTick(() =>

{this.$refs.vueCropperDialog.open (file);});}

VueCropperDialog was introduced as a component

VueCropperDialog.vue

Rotate left and right to remove confirm export default {data () {return {fileinfo: ", dialogVisible: false, / / basic configuration of the cropping component option option: {img:", / / address of the cropped image info: true / / the size information of the clipping box outputSize: 0.8, / / the quality of the image generated by cropping outputType: "jpeg", / / the format of the cropped image canScale: false, / / whether the image allows wheel scaling autoCrop: true, / / whether the screenshot frame is generated by default / / autoCropWidth: 563 / / default generated screenshot box width / / autoCropHeight: 387, / / default generated screenshot box height fixedBox: true, / / fixed screenshot box size does not allow to change fixed: true, / / whether to enable screenshot box width and height fixed ratio fixedNumber: [1.45,1], / / screenshot box width-height ratio full: true / / whether to output the screenshot canMoveBox: false, / / whether the screenshot box can be dragged to original: false, / / whether the screenshot box is rendered according to the original scale centerBox: false, / / 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 frame}, picsList: [] / / the array displayed on the page / / prevent repeated submission of loading: false} }, methods: {open (file) {this.fileinfo = file; this.option.img = file.url; this.dialogVisible = true;}, blobToFile (theBlob, file) {const files = new window.File ([theBlob], file.name, {type: theBlob.type}); return files }, / / rotate turnLeftOrRight (type) {if (type = = "left") {this.$refs.cropper.rotateLeft ();} else {this.$refs.cropper.rotateRight ();}}, / / Click crop, and you can get the processed address finish () {this.$refs.cropper.getCropBlob ((data) = > {this.loading = true) in this step. Const changeFile = this.blobToFile (data, this.fileinfo); const fielUrl = window.URL.createObjectURL (data); / / callback this.$emit ("cutImgEnter", changeFile, fielUrl) after clipping; this.loading = false; this.dialogVisible = false;});}}; / / screenshot .cropper-content {.cropper {width: auto; height: 300px BtnBox {display: flex; align-items: center; justify-content: space-between;} Thank you for reading! This is the end of this article on "how vue uses plug-ins to cut pictures proportionally". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.