Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-06-02 11:25:56
Original
3751 people have browsed it

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)选择的图像宽高
Copy after login

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;
  };
  };
Copy after login

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) {
    // ...
   }
  };
  });
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!