JavaScript to achieve click image flip effect

/**
     * Image rotation* @param direction The direction of rotation*/
    rotate (direction) {
      const img = new Image()
      // The idea here is to map the image to a drawing board and then redraw the image, so we need to create a canvas object to act as our drawing board const canvas = document.createElement('canvas')
      // base64 convert image object img.src = this.uploadImage
      // Remember to convert base64 into an image object before performing other operations. The author has made a mistake here. The onload method loads the image before performing other operations. If the image is a file path, the cross-domain call effect is more obvious.img.onload = () => {
        // The height and width of img cannot be obtained after the img element is hidden, otherwise an error will occur const height = img.height
        const width = img.width
        // The rotation angle is in radians as a parameter const ctx = canvas.getContext('2d')
        if (direction === 'right') {
          canvas.width = height
          canvas.height = width
          ctx.rotate(90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, width, -height)
        } else {
          canvas.width = height
          canvas.height = width
          ctx.rotate(-90 * Math.PI / 180)
          ctx.drawImage(img, 0, 0, -width, height)
        }
        // Convert the rotated image back to base64
        this.uploadImage = this.getBase64Image(img, canvas)
      }
    },
    /**
    * Convert the image file to base64
    */
    getBase64Image (img, canvas) {
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
      return canvas.toDataURL('image/' + ext)
    }