vorg / kollektor

Node app for image collection and mood boards (like Pinterest)
MIT License
82 stars 8 forks source link

Rotate JPEG image based on exif data #6

Open vorg opened 7 years ago

vorg commented 7 years ago

Portrait photos coming eg from iPhone are not rotated correctly.

vorg commented 7 years ago

http://stackoverflow.com/questions/19463126/how-to-draw-photo-with-correct-orientation-in-canvas-after-capture-photo-by-usin

vorg commented 7 years ago

Example solution using exif-js

var EXIF = require('exif-js')
var Image = window.Image

function rotateExifImage (imageObject, fileBlob, callback) {
  EXIF.getData(fileBlob, function () {
    var orientation = EXIF.getTag(this, 'Orientation')
    var rotation = 0
    var rotatedWidth = imageObject.width
    var rotatedHeight = imageObject.height

    switch (orientation) {
      case 2:
        // TODO
        // horizontal flip
        // context.translate(canvas.width, 0)
        // context.scale(-1, 1)
        break
      case 3:
        // 180° rotate left
        context.translate(canvas.width, canvas.height)
        context.rotate(Math.PI)
        break
      case 4:
        // TODO
        // vertical flip
        // context.translate(0, canvas.height)
        // context.scale(1, -1)
        break
      case 5:
        // TODO
        // vertical flip + 90 rotate right
        // context.rotate(0.5 * Math.PI)
        // context.scale(1, -1)
        break
      case 6:
        // 90° rotate right
        rotatedWidth = imageObject.height
        rotatedHeight = imageObject.width
        rotation = 0.5 * Math.PI
        break
      case 7:
        // TODO
        // horizontal flip + 90 rotate right
        // context.rotate(0.5 * Math.PI)
        // context.translate(canvas.width, -canvas.height)
        // context.scale(-1, 1)
        break
      case 8:
        // flip over
        context.translate(canvas.width, canvas.height)
        context.rotate(Math.PI)
        // rotate to the right 90 deg
        rotatedWidth = imageObject.height
        rotatedHeight = imageObject.width
        rotation = 0.5 * Math.PI
        break
    }