Last active
November 16, 2019 16:44
-
-
Save MichaelDimmitt/12e3e8250d5c572b34052289223ce814 to your computer and use it in GitHub Desktop.
html canvas: orient an image to position 1.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Usage | |
import { readFile, profileOrient, createImage } from '../../helpers/ImageHelper'; | |
readFile(file) | |
.then(createImage) | |
.then(profileOrient.bind(undefined, file.type)) | |
.then(blob => {}) | |
*/ | |
// nodemodule used to learn the orientation of an image. | |
import exif from 'exif-js'; | |
export function readFile(file) { | |
return new Promise(resolve => { | |
var reader = new FileReader(); | |
reader.onload = e => resolve(e.target.result); | |
reader.readAsDataURL(file); | |
}); | |
} | |
export function createImage(data) { | |
return new Promise(resolve => { | |
const img = document.createElement('img'); | |
img.onload = () => resolve(img); | |
img.src = data; | |
}); | |
} | |
export function profileOrient(type, img) { | |
return new Promise(resolve => { | |
const canvas = document.createElement('canvas'); | |
exif.getData(img, function() { | |
var orientation = exif.getAllTags(this).Orientation; | |
if ([5, 6, 7, 8].indexOf(orientation) > -1) { | |
canvas.width = img.height; | |
canvas.height = img.width; | |
} else { | |
canvas.width = img.width; | |
canvas.height = img.height; | |
} | |
var ctx = canvas.getContext('2d'); | |
switch (orientation) { | |
case 2: | |
ctx.transform(-1, 0, 0, 1, img.width, 0); | |
break; | |
case 3: | |
ctx.transform(-1, 0, 0, -1, img.width, img.height); | |
break; | |
case 4: | |
ctx.transform(1, 0, 0, -1, 0, img.height); | |
break; | |
case 5: | |
ctx.transform(0, 1, 1, 0, 0, 0); | |
break; | |
case 6: | |
ctx.transform(0, 1, -1, 0, img.height, 0); | |
break; | |
case 7: | |
ctx.transform(0, -1, -1, 0, img.height, img.width); | |
break; | |
case 8: | |
ctx.transform(0, -1, 1, 0, 0, img.width); | |
break; | |
default: | |
ctx.transform(1, 0, 0, 1, 0, 0); | |
} | |
ctx.drawImage(img, 0, 0, img.width, img.height); | |
ctx.canvas.toBlob(resolve, type); | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment