Transfer from https://gitee.com/zwj946/vue_cropper gitee

Study~

<template>
  <div class="hello">
    <div class="before"></div>
    <iy-button style="margin: 30px auto;" type="error" @click="sureSava">Cutting</iy-button>
    <div class="container">
      <div class="img-container">
        <img src="../assets/WIN_20210318_08_34_14_Pro.jpg" ref="image" alt />
      </div>
      <div class="afterCropper">
        <img :src="afterImg" alt />
      </div>
    </div>
  </div>
</template>

<script>

import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";

export default {
  name: "HelloWorld",
  data() {
    return {
      myCropper: null,
      afterImg: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.myCropper = new Cropper(this.$refs.image, {
        viewMode: 1,
        dragMode: "none",
        initialAspectRatio: 0.75,//Initialize proportional width and length
        aspectRatio : 0.75,//Fixed width height ratio
        preview: ".before",//Show the preview picture of the time in this div
        background: false,
        autoCropArea: 0.6,
        zoomOnWheel: false
      });
    },
    sureSava() {
      let a = this.myCropper.getCropBoxData(); //Get crop box data
      let b = this.myCropper.setCropBoxData(); //Set crop box data
      let c = this.myCropper.getCanvasData(); //Get picture data
      let d =this.myCropper.setCanvasData(); //Set picture data
      console.log(a,b,c,d)
      //base64
      this.afterImg = this.myCropper
        .getCroppedCanvas({
          imageSmoothingQuality: "high"
        })
        .toDataURL("image/jpeg");
      // console.log(this.afterImg, "this.afterImg");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  display: flex;
}
.img-container {
  height: 400px;
  overflow: hidden;
}
.before{
  width: 75px;
  height: 100px;
  overflow: hidden;
}
.afterCropper {
  flex: 1;
  margin-left: 20px;
  border: 1px solid salmon;
  text-align: center;
}
.afterCropper img {
  width: 150px;
  margin-top: 30px;
}
</style>

cropper - crop picture - IE9+

Using cropperjs

import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
this.myCropper = new Cropper('Cropped object', 'Configuration object') //Returns a clipper object

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg') //Get the cropped base64 picture
this.myCropper.getCropBoxData();    //Get crop box data
this.myCropper.setCropBoxData();    //Set crop box data
this.myCropper.getCanvasData();      //Get picture data
this.myCropper.setCanvasData();      //Set picture data

Configuration object

https://github.com/fengyuanchen/cropperjs
Note: the first value is the default

• viewMode view control
  • 0 unlimited
  • 1 limit the clipping box to no more than the range of the picture
  • 2. Limit the clipping box to not exceed the range of the picture, and the picture filling mode is cover longest edge filling
  • 3. The clipping box shall not exceed the range of the picture, and the picture filling mode is contain shortest edge filling
• dragMode drag picture mode
  • crop forms a new clipping box
  • move picture can be moved
  • none nothing
• The initial value of the width to height ratio of the initialAspectRatio clipping box is the same as that of the picture by default. It is only available when aspectRatio is not set
• aspectRatio sets the clipping box to a fixed aspect ratio
• The cropped data stored before data will be automatically set during initialization. It is only available when autoCrop is set to true
• Preview preview sets an area container to preview the results after clipping
  • Element, Array (elements), NodeList or String (selector)
• Responsive responsive re rendering is performed after the window size is adjusted. The default value is true
• restore restores the cropped area to true by default after the window is resized
• checkCrossOrigin checks whether the picture is true by default across domains. If so, the attribute crossOrigin will be added to the copied picture element and a timestamp will be added to src to avoid loading errors due to browser cache when reloading the picture
• checkOrientation checks the direction information of the picture (only JPEG pictures have it). The default is true. When rotating the picture, some processing will be done to the direction value of the picture to solve some problems on the IOS device
• Whether modal displays the black mask between the picture and the clipping box. The default is true
• Whether the guides display the dotted line of the clipping box is true by default
• Whether the center displays the '+' indicator in the middle of the clipping box. The default is true
• Whether highlight displays the white mask (very light) above the clipping box. The default is true
• Whether background displays a grid like background in the container is true by default
• autoCrop allows you to automatically crop pictures during initialization, and use the default true with data
• autoCropArea sets the ratio of the clipping area to the size of the picture to 0-1. By default, 0.8 represents 80% of the area
• movable whether pictures can be moved. The default is true
• Whether rotatable can rotate pictures is true by default
• Whether scalable can scale the picture (the length and width can be changed) is true by default
• Whether zoomable can zoom the picture (change the focal length) is true by default
• Whether zoomOnTouch can zoom the picture by dragging and touching. The default is true
• Whether zoomOnWheel can zoom the picture through the mouse wheel is true by default
• wheelZoomRatio sets the sensitivity of mouse wheel scaling. The default is 0.1
• Whether the cropBoxMovable can drag the clipping box is true by default
• Can cropBoxResizable change the size of the clipping box? The default value is true
• toggleDragModeOnDblclick whether the drag picture mode (move and crop) can be switched by double clicking. The default is true. When the drag picture mode is none, it cannot be switched. This setting must be supported by the browser
• The minimum width and height of minContainerWidth (200), minContainerHeight (100), minCanvasWidth (0), minCanvasHeight (0), minCropBoxWidth (0), minCropBoxHeight (0) container, picture and clipping box are the default values. Note that the minimum height and width of clipping box is relative to the page, not relative to the picture

method

Note: if the method is not set to return any value, it will return an instance of cropper, so multiple methods can be written in chain

• crop() displays the crop box manually
• reset() resets the picture and crop box to the initial state
• replace(url[, hasSameSize]) replaces the image path and rebuilds the crop box
  • url new path
  • The default value of hasSameSize is false. If it is set to true, it means that the size of new and old pictures is the same. You only need to change the path without rebuilding the clipping box
• enable() unfreezes the crop box
• disable() freezes the crop box
• destroy() destroys the crop box and removes the cropper instance
• move(offsetX[, offsetY]) the specified distance of the moving picture. A parameter represents the horizontal and vertical moving distance
• moveTo(x[, y]) moves the picture to a specified point. A parameter represents the horizontal and vertical moving distance
• zoom(ratio) a zoom ratio greater than zero zooms in and out less than zero
• zoomTo(ratio[, pivot]) zooms and sets the position of the center point
• rotate(degree) rotation is similar to css
• rotateTo(degree) rotates to an absolute angle
• scale(scaleX[, scaleY]), scaleX(scaleX), scaleY(scaleY) scaling a parameter represents the same horizontal and vertical scaling value
• getData([rounded]) returns the clipping area based on the original image! Full size! The position and size of rounded are false by default, indicating whether to display the rounded data. With these data, they can be cropped and displayed directly on the original drawing
• setData(data) changes the position and size of the clipping area based on the original image. It is only effective when viewMode is not 0
• getContainerData(), getImageData(), getCanvasData(), setCanvasData(data), getCropBoxData(), setCropBoxData(data) container, picture container (canvas), picture and crop region relative to the data setting and acquisition of the container
• getCroppedCanvas([options]) gets a canvas object of the cropped picture, and options sets some data of the canvas
  • width, height, minWidth, minHeight, maxWidth, maxHeight, fillColor, imageSmoothingEnabled (whether the image is smooth, the default is true), imageSmoothingQuality (the default quality of the image is low, medium and high)
• setAspectRatio(aspectRatio) changes the aspect ratio of the crop region
• setDragMode([mode]) sets the drag picture mode

event

• Preparation events before ready rendering (the picture has been loaded and the cropper instance has been prepared)
• cropstart, cropmove, cropend, crop start painting clipping box (or canvas), halfway through painting clipping box (or canvas), after painting clipping box (or canvas), and clipping event detail. originalEvent,event.detail.action
  • When autoCrop is true, the crop event will be triggered before ready
• Zoom crop box zoom event