preface

Using the weekend two days, do a picture of the cutting function and preview function, front-end picture cutting scheme, most are packaged with CropperJS, NPM has vue-CropperJS can be used directly, ViewerJS is used to achieve the picture preview, here directly using the V-Viewer to achieve.

  1. The demo address

  2. The warehouse address

Image cropping

Picture cropping process

  • First, use the el-Upload component to render an existing or cropped image
  • Click Upload file and select the image you want to crop
  • Pop up a box, in the box with vue-CropperJS image clipping
  • After clipping, upload the processed image file (Blob format) to the server or preview it locally through the callback function
  • Cropped list of images, click full screen preview through V-Viewer (auxiliary function)

The use of vue – cropperjs

Code implementation

  • The VueCropper component is first registered with the component
  • Components can be used directly through the vue-Cropper tag
  • Set this $refs. Cropper. SetAspectRatio (1), pictures can only according to certain proportion cutting, want to cut at random can not set
  • Through this $refs. Cropper. RelativeZoom, enclosing onRotateDegreeChange, enclosing $refs. Cropper. Move, enclosing $refs. Cropper. ScaleX API, Images can be translated, zoomed, flipped, rotated and other operations
  • Through this $refs. Cropper. GetCroppedCanvas () toBlob () to get to the processed images Blob format file
  • Blob files are processed into files and uploaded to the server
// Import the component and register it
import "cropperjs/dist/cropper.css";
import VueCropper from "vue-cropperjs";

// Use the component directly
<vue-cropper
  overflow-hidden
  ref="cropper"
  :src="src"
  preview=".preview"
  :minContainerHeight="500"
  background
  :ready="onReady"
/>

// Images can be clipped to a width/height ratio in the onReady method
this.$refs.cropper.setAspectRatio(this.aspectRatioValue);

// Zoom the image
this.$refs.cropper.relativeZoom(percent);

// Image rotation Angle
this.onRotateDegreeChange(this.rotateDegree);

// Image panning
this.$refs.cropper.move(offsetX, offsetY);

// Image flipping
this.$refs.cropper.scaleX(scale);
this.$refs.cropper.scaleY(scale);

/ / reset
this.$refs.cropper.reset();

// Get the data of the modified image
  this.$refs.cropper
      .getCroppedCanvas({
        // Limit the canvas size, limit the size of the generated image
        maxWidth: 2056.maxHeight: 2056,
      })
      .toBlob(
        (blob) = > {
          // Call the specified callback function to upload the bloB to the server or local preview
          this.$emit("confirm", blob);
        },
        // If the rotation Angle is not a right Angle, the image must have a blank area. The blank area is transparent by default. Use PNG format
        //this.rotateDegree % 90 === 0 ? this.file.type : 'image/png',
        this.file.type,
        / / quality
        this.quality
      );
      
// Upload the file to the server
function onCropperConfirm(blob) {
    let file = new File([blob], filename, { type: blob.type,});
     const formData = new FormData();
     formData.append("file", file);
     // ...
     axios.post("/upload", formData).then((res) = > {
          // ...})}Copy the code

Implementation effect

The use of v – viewer

Code implementation

The MAIN implementation of the V-Viewer image full screen preview, based on viewerJS package

  • Start by importing CSS in main.js and registering the V-Viewer plug-in
  • This.$viewerApi can be called directly in the page, passed in the image path array and the corresponding index, to achieve a full-screen preview of the image
// First import the component in main.js
import "viewerjs/dist/viewer.css";
import VueViewer from "v-viewer";
Vue.use(VueViewer);

// used in the component
this.$viewerApi({
    options: {
      toolbar: true.initialViewIndex: 1,},images: [
        "https://placem.at/people? random=1&txt=0&w=500&h=500"."https://placem.at/people? random=1&txt=0&w=1000&h=500"]});Copy the code

Implementation effect

The resources

1. www.npmjs.com/package/v-v…

2. www.npmjs.com/package/vue…

The last

Picture clipping using plug-ins, can only say that CV engineers are not too cool, to understand the principle of words, or need to spend a lot of time research; Finally, if this article is helpful to you, please give it a thumbs up