# npm npm install vue-cropper
# cropper.vuetemplatedivstyle=' width : auto； height: 500px；' UE-cropper ref=' cropper ' : img=' option.img ' : outputsize=' option.size ' : output type=' option.out e=' option.can move ' : can move box=' option.can move box ' : original=' option.original ' 33666 ption.auto crop ion.fixed number ' 3360 center box=' option.center box=' option.center fixed box=' option.fixed box ' style=' backgrood '/vue-cropper El-row class=' mt-4 text-center ' El-buttontype=' success ' @ click=' start crop ('从屏幕截图/El-button El-buttontype=' primary ' @ click=' finish crop ('查看截图/El-button El-buttontype=' warning ' @ click=El-button El-buttontype=' danger ' @ click=' clear crop () '屏幕清除divel-button @ class (divel-button ) class )的El-button El-buttontype=' info ' @ click=' rotate left () '左获取divEl-buttontype '屏幕快照base64数据/El-button El-buttontype=' primary ' @ click=' getcropblob () '屏幕快照div导出默认值{ name : ' index '，components: { VueCropper }，data (} { return } option : { img : '/API/) //剪裁生成图像的质量outputType: 'jpeg '，//剪裁生成图像的格式info: true， //剪裁框大小信息canScale: false //是否允许照片控制盘缩放autoCrop: false，//默认情况下是否生成屏幕快照框fixed: false 截图边框宽度高固定比率fixed number 3360 [ 7，5 ]， //屏幕快照边框的宽高比例是否打开full: true，是否输出//原画比例的屏幕快照fixedBox: false，//固定屏幕快照边框的大小为canMove: false 上传图像是否可以移动canMoveBox: true，//屏幕快照边框是否可以拖动original: false，//上传图像并按原始比例录制centerBox: false //截图框是否限制在图像内infoTrue: true //true显示实际输出图像宽度高度的false展示中可见的截图框宽度高度}；mounted ()/leturl=' https://z3.ax1x.com/2021/04/16/c w0l 2d.jpg )；methods:{//startcrop () { this.$refs.cropper.startCrop )；//截图finishCrop () if ) this.$refs.cropper.cropw！==0) (/修剪this.$ refs.cropper.getcropdata (data={ this.option.img=data； )； //修剪this.$refs.cropper.stopCrop ()； }，//截图stopCrop () { this.$refs.cropper.stopCrop ) )；//截图clearCrop () { this.$refs.cropper.clearCrop ) )；//向右旋转90度的rotateRight () { this.$ refs.cropper.rotate right )；//向左旋转90度的rotateLeft () { this.$refs.cropper.rotateLeft )；和//已捕获截图的base64数据getcropdata ((this.$ refs.cropper.getcropdata ) data=(/dosomethingconsole.log ) ) data )；和//获取屏幕快照的blob数据getcropblob ((this.$ refs.cropper.getcropblob ) data=(/dosomethingconsole.log ) ) data )；//屏幕快照边框宽度getCropW () { return this.$ refs.cropper.cropw；//屏幕快照边框高度getcroph ((return this.$ refs.cropper.croph； }； }； /scriptstyle scoped/style
#效果图
#参考文档官方文档Github