How to realize cropping Picture with vue-cropper

This article mainly explains the "vue-cropper how to achieve cropping pictures", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue-cropper how to achieve cropping pictures" bar!

Show the effect first.

How to use:

1. Installation

Npm install vue-cropper / / (if not installed, use cnpm)

2. just paste the code directly. That's what happens to people.

Real-time preview

Download, upload, save and cancel import {VueCropper} from "vue-cropper"; import {imgView, imgUploadUrl, uploadImg} from "services"; import {alerts} from "js/yydjs.js" Export default {components: {VueCropper}, data () {return {imgView, picId: ", newPicId:", crap: false, previews: {}, option: {img: ", size: 1, full: false, / / output original screenshot props name full outputType:" png ", canMove: true Original: false, canMoveBox: false, autoCrop: true, autoCropWidth: 300, autoCropHeight: 300, fixedBox: true,}, downImg: "#", cate: ", ratio: 1,} }, mounted () {this.option.img = this.imgView + this.picId; this.option.autoCropHeight = this.option.autoCropWidth * this.ratio;}, methods: {saveNewPic () {if (! this.newPicId) {return alerts ("upload cropped pictures");} this.onCallback (this.newPicId);}, changeScale (num) {num = num | | 1 This.$refs.cropper.changeScale (num);}, rotateLeft () {this.$refs.cropper.rotateLeft ();}, rotateRight () {this.$refs.cropper.rotateRight ();}, / / Real-time preview function realTime (data) {console.log (data, "realTime"); this.previews = data }, / / convert base64 to file Baidu randomly look at the demand using dataURLtoFile (dataurl, filename) {var arr = dataurl.split (","), mime = arr [0] .match (/: (. *?); /) [1], bstr = atob (arr [1]), n = bstr.length, u8arr = new Uint8Array (n) While (data -) {u8arr [n] = bstr.charCodeAt (n);} return new File ([u8arr], filename, {type: mime});}, uploadNewPic () {this.$refs.cropper.getCropData ((data) = > {let name = new Date (). GetTime (); let file = this.dataURLtoFile (data, `$ {name} .png`); console.log (file, "ssss") Let fd = new FormData (); fd.append ("file", file); fd.append ("cate", this.cate); uploadImg (fd). Then ((res) = > {if (res) {let {scaleRelativePath = ""} = res.body; this.newPicId = scaleRelativePath; alerts ("upload successful", "success") / / self-written pop-up box}});};}, down (type) {/ / event.preventDefault () var aLink = document.createElement ("a"); aLink.download = "author-img"; / / output if (type = "blob") {this.$refs.cropper.getCropBlob ((data) = > {console.log (data, type)) This.downImg = window.URL.createObjectURL (data); / / aLink.download = this.downImg; console.log (this.downImg); aLink.href = window.URL.createObjectURL (data); aLink.click ();});} else {this.$refs.cropper.getCropData ((data) = > {this.downImg = data; aLink.href = data ALink.click ();}), uploadImg (e) {/ / upload picture / / this.option.img var file = e.target.files [0]; if (! /\. (gif | jpg | jpeg | png | bmp | JPG | PNG) $/ .test (e.target.value) {alerts ("picture type must be .gif, one of jpeg,jpg,png,bmp"); return false } var reader = new FileReader (); reader.onload = (e) = > {let data; if (typeof e.target.result = "object") {/ / convert Array Buffer to blob if data = window.URL.createObjectURL ([e.target.result]) is not required for base64;} else {data = e.target.result } this.option.img = data;}; / / convert to base64 / / reader.readAsDataURL (file) / / convert to blob reader.readAsArrayBuffer (file);}, imgLoad (msg) {console.log (msg, "msg");},}; @ import "~ css/public.scss"; .handleDialog {@ include cententCenterDialog; .cropperContent {display: flex Justify-content: space-between; padding-left: 20px; .cropper {width: 400px; height: 400px; border: 1px solid # ddd;} .previewBox {flex: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; .title {font-size: 18px; height: 36px; margin-bottom: 20px } .showPreview {flex: 1; display: flex; justify-content: center;. Examples {overflow: hidden; background: # eeeeee; border: 1px solid # eeeeee;} .footerButton {margin-top: 30px; margin-left: 20px; display: flex; justify-content: flex-end .scopeButton {width: 400px; display: flex; justify-content: space-between;} .uploadButton {flex: 1; display: flex; justify-content: center;} .localButton {cursor: pointer; color: # ffffff; background: # 409eff; padding: 10px 15px; border-radius: 3px; appearance: none; display: flex Align-self: center; margin-right: 10px;} .inputFile {width: 180px; position: absolute; clip: rect (000000);}

3, note, support network pictures also support local pictures, if the picture needs to be uploaded, I transfer the file through base64, and then upload.

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