How to implement the function of cropping pictures and uploading to the server in vue

This article mainly introduces the function of cropping pictures and uploading to the server in vue. It is very good and has reference value. Friends who need it can refer to the

preview link and click to preview

Renderings As shown below, everyone feels good, please refer to the implementation code.

Requirements

• [x] Preview: According to selection The image size adaptively fills the left cropping area

• [x] Cropping: Move the preview area on the right side of the cropping frame to preview in real time

• [x ] Upload & Clear: Click Confirm to upload the cropped image, click the Cancel button to clear the image

• [ ] The cropping frame can be resized
  

Implementation steps

methods:funName() - corresponds to the funName method in methods in the source code

data:dataName - corresponds to the funName method in data in the source code dataName data

1. Picture selection and reading

• Select pictures: (methods:selectPic) Use input[ type="file"] pops up the picture selection box, and js actively triggers the click event;

• Read the picture: (methods:readImage) Create a picture object and use createObjectURL to display the picture. objectURL = URL.createObjectURL(blob) ;

2. Display images in canvas

Canvas you need to master Related knowledge:

1. Clear the canvas ctx.clearRect(x,y,width,height);

2. Fill the rectangle ctx.fillRect(x, y,width,height) ;

3. Draw an arc ctx.arc(x,y,r,startAngle,endAngle,counterclockwise) ;Draw a rectangle ctx.rect(x,y,width ,height);

4. Draw image drawImage

##

# 语法
 ctx.drawImage(image, dx, dy);
 ctx.drawImage(image, dx, dy, dWidth, dHeight);
 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
 # 参数
 image    # 绘制的元素（可以为HTMLImageElement，HTMLVideoElement，或者 HTMLCanvasElement。）
 dx,dy    # 目标画布(destination canvas)左上角的坐标
 dWidth,dHeight  # 目标画布(destination canvas)上绘制图像宽高
 sx,sy    # 源画布(source canvase)左上角的坐标
 sWidth,sHeight  # 源画布(source canvase)选择的图像宽高

5. Cut the picture ctx.clip() ;

Specific steps:

• Calculate canvas width and height: (methods:calcCropperSize) Calculate canvas width and height (data:cropperCanvasSize) based on the image size, so that the image can be adaptively displayed in the cropping area, and determine the position of the upper left corner of the crop (data:cropperLocation).

• Draw the left cropping area image: (methods:renderCropperImg)

Vue data diagram of the cropping area:

• Draw the preview image on the right: (methods:renderPreviewImg)

3. Move the cropping box

Knowledge points: onmousedown, onmousemove, onmouseup

Specific implementation:

methods:drag()

Record Mouse coordinates, mouse movement calculates the center position of the circle based on the offset.

canvas.onmousedown = e => {
  let [lastX, lastY] = [e.offsetX, e.offsetY];
  self.movement = true;
  canvas.onmousemove = e => {
   self.circleCenter = {
   X:
    self.cropperCanvasSize.width > 2 * self.slectRadius
    ? self.circleCenter.X + (e.offsetX - lastX)
    : self.cropperCanvasSize.width / 2,
   Y:
    self.cropperCanvasSize.height > 2 * self.slectRadius
    ? self.circleCenter.Y + (e.offsetY - lastY)
    : self.cropperCanvasSize.height / 2
   };
   self.renderCropperImg();
   [lastX, lastY] = [e.offsetX, e.offsetY];
  };
  canvas.onmouseup = e => {
   self.movement = false;
   canvas.onmousemove = null;
   canvas.onmouseup = null;
  };
  };

4. Upload pictures to the server

Knowledge points:

• Usage of FormData object

• canvas.toBlob() ;

• Convert Data URI to File then append to FormData

Specific implementation:

methods:upload()
this.$refs.preview.toBlob((blob)=> {
  const url = URL.createObjectURL(blob);
  const formData = new FormData();
  formData.append(this.uploadProps.name, blob, `${Date.now()}.png`);
  if(this.data){
   Object.keys(this.uploadProps.data).forEach(key => {
    formData.append(key, this.uploadProps.data[key]);
   });
  }
  const request = new XMLHttpRequest();
  request.open("POST", this.uploadProps.action, true);
  request.send(formData);
  request.onreadystatechange = () => {
   if (request.readyState === 4 && request.status === 200) {
    // ...
   }
  };
  });

The above is what I compiled for everyone, I hope It will be helpful to everyone in the future.

Related articles:

Use ES6 to solve the memory leak problem through WeakMap (detailed tutorial)

Use jquery to click Enter Key to achieve login effect (detailed tutorial)

Set global variables or data methods according to vue (detailed tutorial)

The above is the detailed content of How to implement the function of cropping pictures and uploading to the server in vue. For more information, please follow other related articles on the PHP Chinese website!