rendering

Preview link Click preview

demand

  • [x] Preview: Fill the left clipping area adaptively according to the selected image size
  • [x] Clipping: Move the preview area on the right of the clipping box to preview in real time
  • [X] Upload & Delete: Click Confirm to upload cropped image, click Cancel button to delete image
  • [] The clipping frame is adjustable

Implementation steps

Methods :funName() – Corresponds to the funName method in the source code

Data :dataName – Corresponds to the dataName data in the data source

1. Picture selection and reading

  • Choose pictureUse: (the methods: selectPic)input[type="file"]Popup the selection picture box, JS actively trigger the click event;
  • Read the pictures: (methods:readImage) to create an image objectcreateObjectURLDisplay images.objectURL = URL.createObjectURL(blob);

2. Display images in canvas

Canvas related knowledge to master:

  1. Empty canvasctx.clearRect(x,y,width,height);
  2. Fill the rectanglectx.fillRect(x,y,width,height);
  3. Draw the arcctx.arc(x,y,r,startAngle,endAngle,counterclockwise); Draw a rectanglectx.rect(x,y,width,height);
  4. The plotdrawImage
        # grammar
    ctx.drawImage(image, dx, dy);
    ctx.drawImage(image, dx, dy, dWidth, dHeight);
    ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    # parameters
    image                Draw element (this can be HTMLImageElement, HTMLVideoElement, or HTMLCanvasElement.)
    dx,dy                The coordinates of the top left corner of the destination canvas
    dWidth,dHeight       Draw the image width and height on the Destination canvas
    sx,sy                The coordinates of the upper left corner of the source canvase
    sWidth,sHeight       Select the width and height of the image
Copy the code
  5. Cut imagesctx.clip();

Specific steps:

  • Calculate canvas width and height: (Methods :calcCropperSize) According to the image size, calculate the canvas width and height (data:cropperCanvasSize), so that the image can be displayed adaptively in the clipping area, and determine the clipping upper left corner position (data:cropperLocation).
  • Render the clipped region image on the left (Methods :renderCropperImg)

Schematic diagram of clipping area vue Data:

  • Methods :renderPreviewImg

3. Move the clipping box

Onmousedown onMousemove OnMouseup

Concrete implementation:

methods:drag()

Record the mouse coordinates and calculate the center position according to the offset when the mouse moves.

      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 the code

4. Upload the image to the server

Knowledge:

  • The use of FormData objects
  • canvas.toBlob() ;
  • Convert Data URI to File then append to FormData

Concrete implementation:

methods:upload()

      this.$refs.preview.toBlob((blob) = > {
        const url = URL.createObjectURL(blob);
        const formData = new FormData();
        formData.append(this.uploadProps.name, blob, `The ${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 = (a)= > {
          if (request.readyState === 4 && request.status === 200) {
                // ...}}; });Copy the code

Source code address original link