Image getting cropped/resize on rotation +90 or -90

[quiquepr69]

Hi all,
I have a simple set up to only rotate an image, no cropping, no resizing, no flip. My setup is minimal and it does rotate the image as intended, I am encoding the image let img = canvas?.toDataURL('image/jpeg', 1) the issue I am facing is that on every rotation the image gets resized and file size decrease from 2mb down to 985kb.

Upon inspecting the element I notice there's 2 canvas elements, one that have a width ="1200px"and height="675" and the other does not, both are set to display none, once the image is rotated the first element gets the width and height set to 675px and the second changes accordingly to the rotating angle, on saving the image the one that does gets saved is the one that is 675px square hence the cropping issue.

I am using Nuxt.js version 2.12.0

code I am using:

<Cropper
     ref="cropper"
      :src="selectedImage.url + `?_=${cacheKey}`"
      :resize-image="false"
       @change="handleChangeImage"
    />

<div class="button-container">
     <div class="leftRotate-overlay" @click.prevent="rotate(-90)">
        <i class="fas fa-undo"></i>
     </div>
      <div class="rightRotate-overlay" @click.prevent="rotate(90)">
         <i class="fas fa-redo"></i>
     </div>
 </div>

handleChangeImage({ coordinates, canvas, image }) {
      let img = canvas?.toDataURL('image/jpeg', 1)
      image.preview = img
      image.file = this.dataURItoBlob(img)
      image.mediaApiId = this.selectedImage?.mediaApiId
      this.imageRotated = image
  },

dataURItoBlob(dataURI) {
      let byteString
      if (dataURI.split(',')[0].indexOf('base64') >= 0) {
        byteString = atob(dataURI.split(',')[1])
      } else {
        byteString = atob(dataURI.split(',')[1])
      }

      let mimeString = dataURI
        .split(',')[0]
        .split(':')[1]
        .split(';')[0]
      // construct a Blob of the image data
      let array = []
      for (let i = 0; i < byteString.length; i++) {
        array.push(byteString.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], { type: mimeString })
 },

rotate(angle) {
      this.$refs.cropper.rotate(angle)
 }

My user criteria is as follow:
after a user uploads a image or images an edit icon will display on a corner of the image thumbnail, upon icon click a modal will open and display the original version, inside the modal the user can rotate the image clockwise or counter clock wise, then click on the save btn to save the new image already rotated. Any help will be greatly appreciated, thank you.