[feature] orientation fix for jpeg image files with exif orientation data

[vincent-cm]

Some jpeg metadata contains orientation option. Uploading those files may take the rotated one to the server. I think it is better to check the file if it is a rotated image and then rotate to normal before upload.

Check out https://github.com/danialfarid/ng-file-upload : orientation fix

[retailify]

There are no file transformers in ngx-uploader yet. Could you send a PR?

[vincent-cm]

Transform logic can refer following code:

transformCoordinates = function (canvas, orientation) {
    var ctx = canvas.getContext('2d')
    var width = canvas.width
    var height = canvas.height
    var styleWidth = canvas.style.width
    var styleHeight = canvas.style.height
    if (!orientation || orientation > 8) {
      return
    }
    if (orientation > 4) {
      canvas.width = height
      canvas.height = width
      canvas.style.width = styleHeight
      canvas.style.height = styleWidth
    }
    switch (orientation) {
      case 2:
        // horizontal flip
        ctx.translate(width, 0)
        ctx.scale(-1, 1)
        break
      case 3:
        // 180° rotate left
        ctx.translate(width, height)
        ctx.rotate(Math.PI)
        break
      case 4:
        // vertical flip
        ctx.translate(0, height)
        ctx.scale(1, -1)
        break
      case 5:
        // vertical flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI)
        ctx.scale(1, -1)
        break
      case 6:
        // 90° rotate right
        ctx.rotate(0.5 * Math.PI)
        ctx.translate(0, -height)
        break
      case 7:
        // horizontal flip + 90 rotate right
        ctx.rotate(0.5 * Math.PI)
        ctx.translate(width, -height)
        ctx.scale(-1, 1)
        break
      case 8:
        // 90° rotate left
        ctx.rotate(-0.5 * Math.PI)
        ctx.translate(-width, 0)
        break
    }
  }

[retailify]

Thank you :)

[alicantokdemir]

Any updates on this?

[federicoruf]

@vincent-cm, with your solution, I can detect if the image is portrait, so the plugin doesn't change the orientation of it? What about the parameters (canvas, orientation)? I don't understand how can I implement it on Angular 2+