Ideas:

1. Touchstart: When your finger touches the screen, get the initial coordinates, lastpos.x, lastpos.y. 2. Touchmove: Get the current coordinates, Curloc. x, Curloc. y, as you swipe your finger across the screen. X, lastpos.y), ends at the current position (curloc. x, curloc. y), and resets the initial coordinates (lastpos.x, lastpos.y).

The element’s position set relative to the viewport & the x and y coordinates from the click position to the current body viewable area

If you directly use the coordinates clicked by the mouse to draw on the canvas, you will find that the coordinates of the drawn line are always deviated.

As shown in the figure, the origin of the coordinate system of the mouse is not the same as that of the canvas. It makes a difference. The starting coordinate of the red rectangle on the canvas is the x-distance from which the mouse drops, minus the distance from the canvas to the page pagex-left.

GetBoundingClientRect ()

GetBoundingClientRect is used to get the set of positions of an element relative to the view. The set has properties like top, right, bottom, and left. Do you know getBoundingClientRect()?

The complete code

WindowToCanvas (x,y){letThe rect = this. Can. GetBoundingClientRect () / / x and y parameters of the incoming is the coordinates of the mouse from the window, and then minus the canvas from the window on the left and top.return{ x: x - rect.left y: y - rect.top }; }, touchStart(e) {this.lastpos = this.windowToCanvas(e.touches[0].clientx,e.touches[0].clienty); }, touchMove(e) {// Get the current coordinateslet curLoc =this.windowToCanvas(e.touches[0].clientX,e.touches[0].clientY);
        letlineWidth = 5; this.ctx.lineWidth=lineWidth; this.ctx.beginPath(); / / the starting position for the location of the mouse down this. CTX) moveTo (this) lastPos) x, enclosing lastPos. Y); This.ctx.lineto (curloc.x, curloc.y); this.ctx.strokeStyle='black'; this.ctx.stroke(); // Assign the current coordinate to the previous coordinate this.lastpos = curLoc; },Copy the code
<canvas id='canvas' class="canvas"
            @touchstart="touchStart"
            @touchmove="touchMove"
    ></canvas>  
Copy the code

Rotate the Base64 image

Call toDataURL to convert canvas to Base64 and send it to the back end. The base64 image sent was found to be inverted.

Here’s the hope:

Train of thought

  1. Rotate the canvas at the appropriate Angle to draw the base64 image passed in on the new canvas
  2. GetImageData () extracts the cropped image data
  3. PutImageData () draws the extracted image data onto the canvas
  4. Call toDataURL to generate the final Base64 string

1. For ease of calculation, set the width and height of the new canvas to twice the height of the base64 image 2. Move the brush to the center of the canvas, as shown in the gray rectangle 3. Rotate the brush 90 degrees, as shown in the blue rectangle 4. Set clipping coordinates {sx: 0, SY: 0, ex: 0, EY: 0} sx: the y-coordinate of the upper-left corner where the copy will start, as shown in the image. Heihgt sy: the y-coordinate of the upper-left corner where the copy will start, as shown in the image. Heihgt -image.width ex: the width of the rectangle to be copied. Figure, image.height, ey: The height of the rectangle to be copied.

RotateBase64 (data){// Pass in the base64 image that needs to be rotatedreturn new Promise((resolve, reject) => {
          const imgView = new Image();
          imgView.src = data;
          const canvas = document.createElement('canvas');
          const context = canvas.getContext('2d'); const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; Imgview.onload = () => {const imgW = imgview.width; const imgH = imgView.height; const size = imgH; canvas.width = size * 2; canvas.height = size * 2; cutCoor.sx = size; cutCoor.sy = size - imgW; cutCoor.ex = size + imgH; cutCoor.ey = size + imgW; context.translate(size, size); context.rotate(Math.PI/2*3); context.drawImage(imgView, 0, 0); const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey); canvas.width = imgH; canvas.height = imgW; context.putImageData(imgData, 0, 0); resolve(canvas.toDataURL('image/png'));
          };
        });
      },
Copy the code

You can call it like this

RotateBase64 (imgData).then((img) => {console.log(' rotated base64 image:${img}`)});Copy the code

extension

The background request is to send base64 format images, if, the background request other format? So, I wondered how many different display forms the image can take, and how to switch between them. Can the three representations of images url, Base64, and BLOb be converted to meet the requirements?