clipper image in ios bug

[cj654eji6]

Describe the bug

const canvas = this.$refs.clipper.clip();
let image = canvas.toDataURL("image/jpeg", 0.75);

Images transferred on an iPhone will be rotated 90 degrees

[Timothy Lee]

Hi @cj654eji6
would you like to show your full code?
You're using safari?

[cj654eji6]

<clipper-fixed
  class="basic lg clipper-fixed"
  ref="clipper"
  :src="uploadImage"
  :round="false"
   shadow="rgba(192,192,192,0.3)"
   :rotate="rotation"
   :ratio="ratio"
/>
<a-button key="submit" type="primary" @click="clipperHandle">{{
    $t("crop")
}}</a-button>

clipperHandle() {
  const canvas = this.$refs.clipper.clip({ orient: this.orient });
   let image = canvas.toDataURL("image/jpeg", 0.75);

   this.setClipperImages({ key: this.holeKey, image: image });
   this.rotation = 0;
   this.clipperVisible = false;
},

This is the complete code
After cropping the picture will turn 90 degrees on the iPhone

[cj654eji6]

[Timothy Lee]

I tried this example on iPhone and it works.
Could you try it on to see if it's worked?

[cj654eji6]

I use clipper-fixed component
Want to understand the difference between clipper-basic and clipper-fixed

[Timothy Lee]

They are the same in clipping image function, maybe you accidentally rotate the image?

[cj654eji6]

I tested your clipper-fixed example on an iPhone.
The cropped image will also rotate 90 degrees.

[Timothy Lee]

I found a similar issue in other cropping component:
Foliotek/Croppie#586
I'm thinking alternative solutions.

[cj654eji6]

I know that uploading photos on ios will cause rotation due to exif orientation parameter
Judging the image orientation and rotation solved this bug

compress(img, width, height, orient) {
      var canvas, ctx, img64, rotate;
      //獲取圖片方向
      canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      ctx = canvas.getContext("2d");
      //如果圖片方向等於6 ，則旋轉矯正，反之則不做處理
      if (orient == 6 ) {
        ctx.save();
        ctx.translate(width / 2, height / 2);
        ctx.rotate((90 * Math.PI) / 180);
        ctx.drawImage(img, 0 - height / 2, 0 - width / 2, height, width);
        ctx.restore();
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }
      img64 = canvas.toDataURL("image/jpeg", 0.75);
      return img64;
    }