Vue picture clipping function component
First of all, the actual clipping picture function of this component is handed over to the background to achieve, and the front end needs to provide several parameters, as follows
Functions:
- Create the cropper.vue component with the following code:
<template>
<div>
<el-upload
class="upload-demo"
:action="cropperData.updateimgSrc"
:on-success="upDateSuccess"
multiple
:limit="1"
:show-file-list="false"
:file-list="fileList"
:modal="false"
:disabled="cropperData.uploadBtnIs && Boolean(cropperData.cropperShowImgUrl)">
<div v-if=! "" cropperData.uploadBtnIs" :style="{width:(cropperData.showWidth+'px'),height:(showBoxheight)}" class="cropper-img-show">
<img v-if="cropperData.cropperShowImgUrl" :src="cropperData.cropperShowImgUrl" />
<span v-if=! "" cropperData.cropperShowImgUrl" class="el-icon-plus"></span>
</div>
<div v-if="cropperData.uploadBtnIs">
<el-button :disabled="Boolean(cropperData.cropperShowImgUrl)" size="small" type="primary">{{cropperData.uploadBtnText}}</el-button>
</div>
</el-upload>
<el-dialog title="Picture cropping" id="cropperBoxMainOuter" :visible.sync="cropperVisible" width="640px" @close="closeDialog" :append-to-body="true">
<div ref="cropperBoxMain" class="cropperBoxMain" @mousemove.stop="cropperBoxMainMove">
<div class="cropper-box" ref="cropperBox" id="cropper-box-wheel" @mousedown.stop="cropperBoxDown" @mousemove.stop="cropperBoxMove" @mouseup.stop="cropperBoxUp" @mouseout.stop="cropperBoxOut">
<div class="cropper-box-000">
<img id="cropper-img1" ref="cropperImg1" class="cropper-img1" :src="imgSrc" :style="{width:(imgData.width+'px'),height:(imgData.height+'px'),marginLeft:(imgData.img1Left+'px'),marginTop:(imgData.img1Top+ 'px'),transform:(imgData.scale),transformOrigin:(imgData.originXY)}" />
<div class="cropper-box-000-div">
</div>
</div>
<div id="cropper-cutting-box" ref="cropperCuttingBox" :style="{width:(cropperData.width+'px'),height:(cropperData.height+'px'),left:(cropperData.cuttingLeft+'px'),top:(cropperData.c uttingTop+'px')}" @mousedown.stop="cropperDown" @mousemove.stop="cropperMove" @mouseup.stop="cropperUp" @mouseout.stop="cropperOut">
<div class="cropper-cutting-box-img">
<img class="cropper-img2" :src="imgSrc" :style="{width:(imgData.width+'px'),height:(imgData.height+'px'),marginLeft:(imgData.img2Left+'px'),marginTop:(imgData.img2Top+ 'px'),transform:(imgData.scale),transformOrigin:(imgData.originXY)}" />
<div class="cropper-img2-alert"> <! </div> </div> <! --<span v-show=! "" cropperData.sizeChangeIs" class="cropper-dot cutting-left-top"></span>
<span v-show=! "" cropperData.sizeChangeIs" class="cropper-dot cutting-left-bottom"></span>
<span v-show=! "" cropperData.sizeChangeIs" class="cropper-dot cutting-right-top"></span>
<span v-show=! "" cropperData.sizeChangeIs" class="cropper-dot cutting-right-bottom"></span>-->
<span class="cropper-dot cropper-dot-move cutting-move-left-top" @mousedown.stop="topDragDown($event,'lefttop')" @mousemove.stop="topDragMove($event,'lefttop')" @mouseup.stop="topDragUp($event,'lefttop')" @mouseout.stop="topDragOut($event,'lefttop')">
<span></span>
</span>
<span class="cropper-dot cropper-dot-move cutting-move-left-bottom" @mousedown.stop="topDragDown($event,'leftbottom')" @mousemove.stop="topDragMove($event,'leftbottom')" @mouseup.stop="topDragUp($event,'leftbottom')" @mouseout.stop="topDragOut($event,'leftbottom')">
<span></span>
</span>
<span class="cropper-dot cropper-dot-move cutting-move-right-top" @mousedown.stop="topDragDown($event,'righttop')" @mousemove.stop="topDragMove($event,'righttop')" @mouseup.stop="topDragUp($event,'righttop')" @mouseout.stop="topDragOut($event,'righttop')">
<span></span>
</span>
<span class="cropper-dot cropper-dot-move cutting-move-right-bottom" @mousedown.stop="topDragDown($event,'rightbottom')" @mousemove.stop="topDragMove($event,'rightbottom')" @mouseup.stop="topDragUp($event,'rightbottom')" @mouseout.stop="topDragOut($event,'rightbottom')">
<span></span>
</span>
<span v-show="cropperData.sizeChangeIs" class="cropper-dot cropper-dot-move cropper-dot-moveX cutting-top-center" @mousedown.stop="topDragDown($event,'topcenter')" @mousemove.stop="topDragMove($event,'topcenter')" @mouseup.stop="topDragUp($event,'topcenter')" @mouseout.stop="topDragOut($event,'topcenter')">
<span></span>
</span>
<span v-show="cropperData.sizeChangeIs" class="cropper-dot cropper-dot-move cropper-dot-moveY cutting-right-center" @mousedown.stop="topDragDown($event,'rightcenter')" @mousemove.stop="topDragMove($event,'rightcenter')" @mouseup.stop="topDragUp($event,'rightcenter')" @mouseout.stop="topDragOut($event,'rightcenter')">
<span></span>
</span>
<span v-show="cropperData.sizeChangeIs" class="cropper-dot cropper-dot-move cropper-dot-moveX cutting-bottom-center" @mousedown.stop="topDragDown($event,'bottomcenter')" @mousemove.stop="topDragMove($event,'bottomcenter')" @mouseup.stop="topDragUp($event,'bottomcenter')" @mouseout.stop="topDragOut($event,'bottomcenter')">
<span></span>
</span>
<span v-show="cropperData.sizeChangeIs" class="cropper-dot cropper-dot-move cropper-dot-moveY cutting-left-center" @mousedown.stop="topDragDown($event,'leftcenter')" @mousemove.stop="topDragMove($event,'leftcenter')" @mouseup.stop="topDragUp($event,'leftcenter')" @mouseout.stop="topDragOut($event,'leftcenter')">
<span></span>
</span>
</div>
</div>
</div>
<div class="cropper-img-set">
<span class="cropper-img-set-title"</span> <div class="cropper-img-set-one"> < p style= "max-width: 100%; clear: both; min-height: 1em"height:40px; width:120px; padding:0 0 0 8px;" v-model="imgData.width" controls-position="right" :min="Number(cropperData.width)" @change="cropperImgWidthChange"></el-input-number>
</div>
<div class="cropper-img-set-one"< p style= "max-width: 100%; clear: both; min-height: 1em"height:40px; width:120px; padding:0 0 0 8px;" v-model="imgData.height" controls-position="right" :min="Number(cropperData.height)" @change="cropperImgHeightChange"></el-input-number>
</div>
</div>
<span slot="footer" class="dialog-footer">
<div style="float:left; margin:0 0 10px 0;">
<el-button type="primary" style="display:block;" :disabled="updateOriginalIs" @click="cutoutImgSub('intrinsic')"<p class= "button" style = "max-width: 100%; clear: both"update-Intrinsic-explain"</p> </div> <el-button </p> </div> <el-buttontype="primary" @click="cutoutImgSub"</el-button> </span> </el-dialog> </div> </template> <script> import {imgCutFun} from'@/api/login'
export default {
name: 'cropper'.data() {
returnCropperData: this.cropperMsg, showBoxheight:' ', // The height of the page display box is fileList:[], cropperVisible:false,
imgSrc:' 'ImgData :{}, // image data imgWheelBoxId: {}' ',
img1Id:' ',
img1Html:' ',
myimageHtml:' ',
imgStartWidth:' '// imgStartHeight:' ',
imgScaleFize:'1'// The original scale of the image is set to 1 mouseDownIs:false, // Whether the mouse is down (drag capture box used) mouseDownClientX:' '// mouseDownClientY:' ',
cropperStartLeft:' ', // The initial left of the screenshot box when the mouse is pressed down,top cropperStartTop:' ',
mouseDownBoxIs:falseMouseDownBoxClientX:' ',
mouseDownBoxClientY:' ',
cropperImgStartLeft:' ', // Drag the left before the image,top cropperImgStartTop:' ',
originalImageWidth:' 'OriginalImageHeight: originalImageHeight:' ',
modaleIs:true,
topDragDownIs:false, // Mouse drag screenshot box to change size, whether to press initialCuttingWidth:' ', // Mouse down and drag to change the size of the initial width, height,left,top initialCuttingHeight:' ',
initialCuttingLeft:' ',
initialCuttingTop:' ',
updateOriginalIs:trueMoveDotType:' '}}, props:['cropperMsg'], watch:{// Check the parent component change cropperMsg(val,oldval){this.cropperData = val this.getShowBoxheight()}, imgWheelBoxId(val) { this.imgWheelBox = val this.myimageHtml =document.getElementById(this.imgWheelBoxId); this.img1Html = document.getElementById(this.img1Id)if (this.myimageHtml.addEventListener) {
// IE9, Chrome, Safari, Opera
this.myimageHtml.addEventListener("mousewheel", this.MouseWheelHandler, false);
// Firefox
this.myimageHtml.addEventListener("DOMMouseScroll", this.MouseWheelHandler, false);
}
},
deep: true}, methods: {// Get the page display box heightgetShowBoxheight() {
if(this.cropperData.cropperShowImgUrl){
this.showBoxheight = 'auto'
}else{
this.showBoxheight = this.cropperData.showHeight + 'px'}, // upDateSuccess(res, file) {this.cropperVisible =true
this.topDragDownIs = false
this.mouseDownBoxIs = false
this.mouseDownIs = false
if(file.response.img_url_list){
this.imgSrc = file.response.img_url_list[0]
}else if(file.response.data){
this.imgSrc = file.response.data.url
}
if(this.cropperData.isAvatar){
this.imgSrc +='? v='+ Math.floor(Math.random()*1000)
}
var that = this
setTimeout(function(){
that.imgWheelBoxId = 'cropper-box-wheel'
that.img1Id = 'cropper-img1'That.getimgoriginaldata ()},100)}, // Get the data of the screenshot boxgetCuttingData() {
var cropperBoxWidth = this.$refs.cropperBox.clientWidth
var cropperBoxHeight = this.$refs.cropperBox.clientHeight
this.cropperData.cuttingLeft = ((cropperBoxWidth - this.cropperData.width)/2)
this.cropperData.cuttingTop = ((cropperBoxHeight - this.cropperData.height)/2)
this.cropperData = JSON.parse(JSON.stringify(this.cropperData))
this.imgData.width = this.$refs.cropperBox.clientWidth
this.imgStartWidth = this.$refs.cropperBox.clientWidth
this.imgStartHeight = Math.round((this.imgData.width/this.originalImageWidth)*this.originalImageHeight)
this.imgData.height = Math.round((this.imgData.width/this.originalImageWidth)*this.originalImageHeight)
this.imgData.img1Left = '0'
this.imgData.img1Top = '0'this.imgData.img2Left = Number(this.imgData.img1Left) - this.cropperData.cuttingLeft this.imgData.img2Top = Number (enclosing imgData. Img1Top) - this. CropperData. CuttingTop}, / / the mouse wheel event MouseWheelHandler (e) {if(e.wheelDelta){
if(e.wheelDelta > 0) {
// console.log('Google Scroll Up')
this.imgScaleMaxFun(e.offsetX,e.offsetY)
}else{
// console.log('Google scroll down')
this.imgScaleMinFun(e.offsetX,e.offsetY)
}
}else if(e.detail){
if(e.detail > 0 ){
// console.log('Firefox Scroll down')
this.imgScaleMinFun(e.layerX,e.layerY)
}else{
// console.log('Firefox Scroll Up') this.imgScaleMaxFun(e.layerX,e.layerY) } } }, ImgScaleMaxFun (x,y){this.imgScalefize = Number(this.imgScalefize)+0.04 // Horizontal var prevWidth = this.imgData.width this.imgData.width = Math.round(this.imgStartWidth*this.imgScaleFize) var imgX = x - Number(this.imgData.img1Left) this.imgData.img1Left = Number(this.imgData.img1Left) - ImgX /prevWidth *(this.imgdata.width - prevWidth)) // Vertical var prevHeight = this.$refs.cropperImg1.clientHeight this.imgData.height = Math.round(this.imgStartHeight*this.imgScaleFize) var imgY = y - Number(this.imgData.img1Top) this.imgData.img1Top = Number(this.imgData.img1Top) - Img2Left = this.imgdata.img1left - Number((imgY/prevHeight)*(this.imgdata.height - prevHeight)) // this.cropperData.cuttingLeft this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop this.imgData = JSON.parse(JSON.stringify(this.imgData)) }, imgScaleMinFun(x,y){
if(this.imgData.width > this.cropperData.width && this.imgData.height > this.cropperData.height){ this.imgScaleFize = ImgScaleFize (this.imgScalefize)-0.04 // Horizontal var prevWidth = this.imgdata.width this.imgdata.width = Math.round(this.imgStartWidth*this.imgScaleFize) var imgX = x - Number(this.imgData.img1Left) this.imgData.img1Left = Img1Left) + Number((imgX/prevWidth)*(prevWidth - this.imgdata.width)) // Vertical var prevHeight = this.$refs.cropperImg1.clientHeight this.imgData.height = Math.round(this.imgStartHeight*this.imgScaleFize) var imgY = y - Number(this.imgData.img1Top) this.imgData.img1Top = Number(this.imgData.img1Top) + Number((imgY/prevHeight)*(prevHeight - this. ImgData. Height)) / / box center enclosing imgData. Img2Left = this. ImgData. Img1Left - this. CropperData. CuttingLeft this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop this.imgData = Parse (json.stringify (this.imgData))}}, // Drag the capture box cropperDown(e) {this.mousedownis =truethis.mouseDownClientX = e.clientX this.mouseDownClientY = e.clientY this.cropperStartLeft = this.cropperData.cuttingLeft this.cropperStartTop = this.cropperData.cuttingTop }, cropperMove(e) {if(this.mouseDownIs){// Determine the level within the rangeif(Number(this.cropperStartLeft) + (e.clientX - this.mouseDownClientX) < 0){
this.cropperData.cuttingLeft = 0
}else if(Number(this.cropperStartLeft) + (e.clientX - this.mouseDownClientX) > (this.$refs.cropperBox.clientWidth - this.$refs.cropperCuttingBox.clientWidth)){
this.cropperData.cuttingLeft = this.$refs.cropperBox.clientWidth - this.$refs.cropperCuttingBox.clientWidth -2
}else{this. CropperData. CuttingLeft = Number (enclosing cropperStartLeft) + (e.c. with our fabrication: lientX - this. MouseDownClientX)} / / vertical is not beyond the scopeif(Number(this.cropperStartTop) + (e.clientY - this.mouseDownClientY) < 0){
this.cropperData.cuttingTop = 0
}else if(Number(this.cropperStartTop) + (e.clientY - this.mouseDownClientY) > (this.$refs.cropperBox.clientHeight - this.$refs.cropperCuttingBox.clientHeight)){
this.cropperData.cuttingTop = this.$refs.cropperBox.clientHeight - this.$refs.cropperCuttingBox.clientHeight -2
}else{this. CropperData. CuttingTop = Number (enclosing cropperStartTop) + (e.c. with our fabrication: lientY - this. MouseDownClientY)} / / box center this.imgData.img2Left = this.imgData.img1Left - this.cropperData.cuttingLeft this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop }else if(this.mouseDownBoxIs){
this.imgData.img1Left = Number( this.cropperImgStartLeft) + (e.clientX - this.mouseDownBoxClientX)
this.imgData.img1Top = Number(this.cropperImgStartTop) + (e.clientY - this.mouseDownBoxClientY)
this.imgData.img2Left = this.imgData.img1Left - this.cropperData.cuttingLeft
this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop
this.imgData = JSON.parse(JSON.stringify(this.imgData))
}else if(this.topDragDownIs){
this.topDragMove(e,this.moveDotType)
}
},
cropperUp() {
this.mouseDownIs = false
this.topDragDownIs = false
this.mouseDownBoxIs = false
},
cropperOut() {
this.mouseDownIs = false}, // Mouse drag picture cropperBoxDown(e) {this.mousedownboxis =true
this.mouseDownBoxClientX = e.clientX
this.mouseDownBoxClientY = e.clientY
this.cropperImgStartLeft = this.imgData.img1Left
this.cropperImgStartTop = this.imgData.img1Top
},
cropperBoxMove(e) {
if(this.mouseDownBoxIs){
this.imgData.img1Left = Number( this.cropperImgStartLeft) + (e.clientX - this.mouseDownBoxClientX)
this.imgData.img1Top = Number(this.cropperImgStartTop) + (e.clientY - this.mouseDownBoxClientY)
this.imgData.img2Left = this.imgData.img1Left - this.cropperData.cuttingLeft
this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop
this.imgData = JSON.parse(JSON.stringify(this.imgData))
}else if(this.topDragDownIs){
this.topDragMove(e,this.moveDotType)
}
},
cropperBoxUp() {
this.mouseDownBoxIs = false
this.topDragDownIs = false
},
cropperBoxOut(e) {
if((e.offsetX <= 0 || e.offsetY <= 0) || (e.offsetX >= this.$refs.cropperBox.clientWidth || e.offsetY >= this.$refs.cropperBox.clientHeight)){
this.mouseDownBoxIs = false
this.topDragDownIs = false}}, // When manually changing the image widthcropperImgWidthChange() {this. ImgData. Height = math.h round ((this) imgData) width/enclosing imgStartWidth). * this imgStartHeight)}, / / change the picture height manuallycropperImgHeightChange() {this. ImgData. Width = math.h round ((this) imgData) height/enclosing imgStartHeight). * this imgStartWidth)}, / high/wide access to the originalgetImgOriginalData() {
var img = new Image();
img.src = this.imgSrc;
var that = this
setTimeout(function() {
if(img.complete){
that.originalImageWidth = img.width
that.originalImageHeight = img.height
that.getCuttingData()
}else{
img.onload = function(){ that.originalImageWidth = img.width that.originalImageHeight = img.height that.getCuttingData() img.onload=null; // Avoid reloading}}if(that.cropperData.sizeChangeIs){
that.updateOriginalIs = false
}else {
var rateWidth = that.originalImageWidth / that.originalImageHeight
var rateHeight = that.cropperData.practicalWidth / that.cropperData.practicalHeight
if(rateWidth == rateHeight){
that.updateOriginalIs = false
}else{
that.updateOriginalIs = true}},100)}, // Make sure to capture the image cutoutImgSub(type) {
var formData = {}
formData.file = this.imgSrc
if(type= ='intrinsic') {/ / upload artwork this. CropperData. CropperShowImgUrl = this. ImgSrc enclosing cropperMsg. CropperShowImgUrl = this. ImgSrc this.cropperVisible =false
this.fileList = []
this.$emit('func',this.cropperData.cropperShowImgUrl)
if(this. CropperData. SizeChangeIs) {/ / no limit when image size enclosing cropperData. ShowHeight ='auto'
}
this.getShowBoxheight()
}else{
formData.left_upper_x = Math.round((Math.abs(this.imgData.img2Left)/this.imgData.width)*this.originalImageWidth)
formData.left_upper_y = Math.round((Math.abs(this.imgData.img2Top)/this.imgData.height)*this.originalImageHeight)
formData.lower_right_x = Math.round(((Math.abs(Number(this.imgData.img2Left)) + Number(this.cropperData.width))/this.imgData.width)*this.originalImageWidth)
formData.lower_right_y = Math.round(((Math.abs(Number(this.imgData.img2Top)) + Number(this.cropperData.height))/this.imgData.height)*this.originalImageHeight)
formData.width = this.cropperData.practicalWidth
formData.height = this.cropperData.practicalHeight
if(this.cropperData.isAvatar){
formData.is_avatar = '1'
formData.uid = this.cropperData.uid
}
if(this. CropperData. SizeChangeIs) {/ / no limit picture size when formData. The width = math.h abs (formData. Lower_right_x - formData. Left_upper_x) formData.height = Math.abs(formData.lower_right_y - formData.left_upper_y) } var that = this imgCutFun(formData).then(function(data){
if(data.errcode == '0'){
that.cropperData.cropperShowImgUrl = data.img_url
that.cropperMsg.cropperShowImgUrl = data.img_url
that.cropperVisible = false
that.fileList = []
that.$emit('func',that.cropperData.cropperShowImgUrl)
if(that. CropperData. SizeChangeIs) {/ / no restrictions that when image size. The cropperData. ShowHeight ='auto'} that.getShowBoxheight()}})}}, // close the popovercloseDialog() {this.filelist = []}, // Drag the screenshot box to change the screenshot size topDragDown(e,type) {/ / is this. MoveDotType =type
this.topDragDownIs = true
this.mouseDownClientX = e.clientX
this.mouseDownClientY = e.clientY
this.initialCuttingWidth = this.cropperData.width
this.initialCuttingHeight = this.cropperData.height
this.initialCuttingLeft = this.cropperData.cuttingLeft
this.initialCuttingTop = this.cropperData.cuttingTop
},
topDragMove(e,type) {
if(this.topDragDownIs){
if(type= ='topcenter') {if(this.cropperData.cuttingTop >= 0){
if(this.cropperData.cuttingTop == 0){
if((Number(this.initialCuttingHeight) + (this.mouseDownClientY - e.clientY)) - this.cropperData.height > 0){
return false
}
}
this.cropperData.height = Number(this.initialCuttingHeight) + (this.mouseDownClientY - e.clientY)
if(this.cropperData.height < 50){
this.cropperData.height = 50
}else{
this.cropperData.cuttingTop = Number(this.initialCuttingTop) + (e.clientY - this.mouseDownClientY)
}
}
}else if(type= ='rightcenter') {if(Math.round(this.$refs.cropperBox.clientWidth - this.cropperData.width - this.cropperData.cuttingLeft) >= 0){
if(Math.round(this.$refs.cropperBox.clientWidth - this.cropperData.width - this.cropperData.cuttingLeft) == 0){
if((Number(this.initialCuttingWidth) + (e.clientX - this.mouseDownClientX)) - this.cropperData.width > 0){
return false
}
}
this.cropperData.width = Number(this.initialCuttingWidth) + (e.clientX - this.mouseDownClientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}
}
}else if(type= ='bottomcenter') {if(Math.round(this.$refs.cropperBox.clientHeight - this.cropperData.height - this.cropperData.cuttingTop) >= 0){
if(Math.round(this.$refs.cropperBox.clientHeight - this.cropperData.height - this.cropperData.cuttingTop) == 0){
if((Number(this.initialCuttingHeight) + (e.clientY - this.mouseDownClientY)) - this.cropperData.height > 0){
return false
}
}
this.cropperData.height = Number(this.initialCuttingHeight) + (e.clientY - this.mouseDownClientY)
if(this.cropperData.height < 50){
this.cropperData.height = 50
}
}
}else if(type= ='leftcenter') {if(this.cropperData.cuttingLeft >= 0){
if(this.cropperData.cuttingLeft == 0){
if((Number(this.initialCuttingWidth) + (this.mouseDownClientX - e.clientX)) - this.cropperData.width > 0){
return false
}
}
this.cropperData.width = Number(this.initialCuttingWidth) + (this.mouseDownClientX - e.clientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}else{
this.cropperData.cuttingLeft = Number(this.initialCuttingLeft) + (e.clientX - this.mouseDownClientX)
}
}
}else if(type= ='lefttop') {if(this.cropperData.cuttingLeft >= 0 && this.cropperData.cuttingTop >= 0){
this.cropperData.width = Number(this.initialCuttingWidth) + (this.mouseDownClientX - e.clientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}else{
this.cropperData.cuttingLeft = Number(this.initialCuttingLeft) + (e.clientX - this.mouseDownClientX)
}
if(this.cropperData.sizeChangeIs){
this.cropperData.height = Number(this.initialCuttingHeight) + (this.mouseDownClientY - e.clientY)
if(this.cropperData.height < 50){
this.cropperData.height = 50
}else{
this.cropperData.cuttingTop = Number(this.initialCuttingTop) + (e.clientY - this.mouseDownClientY)
}
}else{ //等比例缩放
this.cropperData.height = (this.cropperData.width/this.cropperMsg.practicalWidth)*this.cropperMsg.practicalHeight
this.cropperData.cuttingTop = Number(this.initialCuttingTop) - (this.cropperData.height - this.initialCuttingHeight)
}
}
}else if(type= ='righttop') {if(Math.round(this.$refs.cropperBox.clientWidth - this.cropperData.width - this.cropperData.cuttingLeft) >= 0 && this.cropperData.cuttingTop >= 0){
this.cropperData.width = Number(this.initialCuttingWidth) + (e.clientX - this.mouseDownClientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}
if(this.cropperData.sizeChangeIs){
this.cropperData.height = Number(this.initialCuttingHeight) + (this.mouseDownClientY - e.clientY)
if(this.cropperData.height < 50){
this.cropperData.height = 50
}else{
this.cropperData.cuttingTop = Number(this.initialCuttingTop) + (e.clientY - this.mouseDownClientY)
}
}else{ //等比例缩放
this.cropperData.height = (this.cropperData.width/this.cropperMsg.practicalWidth)*this.cropperMsg.practicalHeight
this.cropperData.cuttingTop = Number(this.initialCuttingTop) - (this.cropperData.height - this.initialCuttingHeight)
}
}
}else if(type= ='rightbottom') {if(Math.round(this.$refs.cropperBox.clientWidth - this.cropperData.width - this.cropperData.cuttingLeft) >= 0 && Math.round(this.$refs.cropperBox.clientHeight - this.cropperData.height - this.cropperData.cuttingTop) >= 0){
this.cropperData.width = Number(this.initialCuttingWidth) + (e.clientX - this.mouseDownClientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}else{
if(this.cropperData.sizeChangeIs){
this.cropperData.height = Number(this.initialCuttingHeight) + (e.clientY - this.mouseDownClientY)
}else{ //等比例缩放
this.cropperData.height = (this.cropperData.width/this.cropperMsg.practicalWidth)*this.cropperMsg.practicalHeight
}
}
if(this.cropperData.sizeChangeIs){
if(this.cropperData.height < 50){
this.cropperData.height = 50
}
}
}
}else if(type= ='leftbottom') {if(this.cropperData.cuttingLeft >= 0 && Math.round(this.$refs.cropperBox.clientHeight - this.cropperData.height - this.cropperData.cuttingTop) >= 0){
this.cropperData.width = Number(this.initialCuttingWidth) + (this.mouseDownClientX - e.clientX)
if(this.cropperData.width < 50){
this.cropperData.width = 50
}else{
this.cropperData.cuttingLeft = Number(this.initialCuttingLeft) + (e.clientX - this.mouseDownClientX)
}
if(this.cropperData.sizeChangeIs){
this.cropperData.height = Number(this.initialCuttingHeight) + (e.clientY - this.mouseDownClientY)
if(this.cropperData.height < 50){
this.cropperData.height = 50
}
}else{// Scale this.cropperdata.height = (this. CropperData. Width/enclosing cropperMsg. PracticalWidth). * this cropperMsg. PracticalHeight}}} / / box center this.imgData.img2Left = this.imgData.img1Left - this.cropperData.cuttingLeft this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop }else if(this.mouseDownBoxIs){
this.imgData.img1Left = Number( this.cropperImgStartLeft) + (e.clientX - this.mouseDownBoxClientX)
this.imgData.img1Top = Number(this.cropperImgStartTop) + (e.clientY - this.mouseDownBoxClientY)
this.imgData.img2Left = this.imgData.img1Left - this.cropperData.cuttingLeft
this.imgData.img2Top = this.imgData.img1Top - this.cropperData.cuttingTop
this.imgData = JSON.parse(JSON.stringify(this.imgData))
}
},
topDragUp() {
this.topDragDownIs = false
this.mouseDownBoxIs = false
},
topDragOut(e) {
// this.topDragDownIs = false}, // When the mouse moves outcropperBoxMainMove() {
this.topDragDownIs = false
this.mouseDownBoxIs = false
this.mouseDownIs = false
}
},
mounted:function(){
this.getShowBoxheight()
},
}
</script>
<style>
.cropperBoxMain{
padding: 30px 20px;
}
#cropperBoxMainOuter .el-dialog__body{
padding: 0;
}
.cropper-img-show{
border:1px dashed #aaa;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
overflow:hidden;
position:relative;
}
.cropper-img-show img{
display:block;
width:100%;
height:100%;
}
.cropper-img-show span{
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
font-size:16px;
color:#ccc;} .cropper-box{ width: 600px; height:456px; background:url(.. /.. /images/bghb.jpg); position:relative; moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout: none; cursor:move; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;; }#cropper-cutting-box{
border:1px solid #007bff;position:absolute; Background: rgba (0,0,0,0); cursor:move; box-sizing: border-box; } .cropper-cutting-box-img{ width:100%; height:100%; overflow:hidden; }#cropper-cutting-box .cropper-dot{
position:absolute;
width:7px;
height:7px;
background:#007bff;
}
#cropper-cutting-box .cropper-dot-move{width:auto; height:auto; /*padding:20px; */ background:none; box-sizing:content-box; } .cropper-dot-move span{ background:#007bff;
width:7px;
height:7px;
display:block;
}
.cutting-left-top{
left:-3px;
top:-3px;
}
.cutting-left-bottom{
left:-3px;
bottom:-3px;
}
.cutting-right-top{
right:-3px;
top:-3px;
}
.cutting-right-bottom{
right:-3px;
bottom:-3px;
}
#cropper-cutting-box .cutting-move-left-top{
left:-3px;
top:-3px;
cursor:se-resize;
}
#cropper-cutting-box .cutting-move-left-bottom{
left:-3px;
bottom:-3px;
cursor:ne-resize;
}
#cropper-cutting-box .cutting-move-right-top{
right:-3px;
top:-3px;
cursor:ne-resize;
}
#cropper-cutting-box .cutting-move-right-bottom{
right:-3px;
bottom:-3px;
cursor:se-resize;
}
#cropper-cutting-box .cropper-dot-moveX span{
width:30px;
height:7px;
}
#cropper-cutting-box .cropper-dot-moveY span{
height:30px;
width:7px;
}
.cutting-top-center{
top:-4px;
left:50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
cursor:s-resize;
}
.cutting-right-center{
right:-4px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor:w-resize;
}
.cutting-bottom-center{
bottom:-4px;
left:50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
cursor:s-resize;
}
.cutting-left-center{
left:-4px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
cursor:w-resize;
}
.cropper-box-000{
width:100%;
height:100%;
overflow:hidden;
}
.cropper-box-000 .cropper-box-000-div{
width:100%;
height:100%;
background:# 000;Opacity: 0.4; position:absolute; left:0; top:0; } .cropper-img1,.cropper-img2{ } .cropper-img2{ z-index:9; } .cropper-img2-alert{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:10; } .cropper-img-set{ height:40px; margin:20px 0 0; } .cropper-img-set-title{float:left;
height:40px;
line-height:40px;
padding:0 20px 0 0;
}
.cropper-img-set-one{
float:left;
margin:0 20px 0 0;
}
.cropper-img-set-one .el-input__inner{
height:40px;
}
.update-Intrinsic-explain{
color:# 999;
font-size:12px;
height:22px;
line-height:22px;
}
.update-Intrinsic-explain span{
color:#e40112;
}
.dialog-footer{
display:block;
margin:-20px 0 0;
overflow:hidden;
}
</style>
Copy the code2. The code for the parent component is as follows:
<template>
<div>
<cropper :cropperMsg="cropperMsg" @func="getMsgUrl"></cropper>
</div>
</template>
<script>
import cropper from '@/components/Common/cropper'
export default {
components:{
cropper
},
data() {return{
cropperMsg:{
width:'400'// Width and height of the transparent box:'92',
practicalWidth:'400'// practicalHeight: // practicalHeight:'92',
showWidth:'200'// The width and height of the dashed line displayed in the page (similar to the upload image button of the parent component, except that the captured image can be displayed directly in the parent component)'46',
updateimgSrc:' '// Upload file to cropperShowImgUrl:' '// Image URL (original or returned after interception) modal:true, // whether a mask layer is required (not required when the popover itself is modified)false// When the original image is not restricted, {getMsgUrl(data){this.imgsrc = data}, {getMsgUrl(data){this.imgsrc = data}, . / / the original image to cropperMsg cropperShowImgUrl assignment}} < / script >Copy the codeJust these two codes, please leave a message if you have any questions