import {Pipe, PipeTransform} from '@angular/core'; import {OrientationTypes} from 'ts-exif-parser'; /** * This pipe is used to fix thumbnail and photo orientation based on their exif orientation tag */ @Pipe({name: 'fixOrientation'}) export class FixOrientationPipe implements PipeTransform { public static transform(imageSrc: string, orientation: OrientationTypes): Promise { if (orientation === OrientationTypes.TOP_LEFT) { return Promise.resolve(imageSrc); } return new Promise((resolve) => { const img = new Image(); // noinspection SpellCheckingInspection img.onload = () => { const width = img.width, height = img.height, canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); // set proper canvas dimensions before transform & export if (OrientationTypes.BOTTOM_LEFT < orientation && orientation < OrientationTypes.LEFT_BOTTOM) { // noinspection JSSuspiciousNameCombination canvas.width = height; // noinspection JSSuspiciousNameCombination canvas.height = width; } else { canvas.width = width; canvas.height = height; } // transform context before drawing image switch (orientation) { case OrientationTypes.TOP_RIGHT: // 2 ctx.transform(-1, 0, 0, 1, width, 0); break; case OrientationTypes.BOTTOM_RIGHT: // 3 ctx.transform(-1, 0, 0, -1, width, height); break; case OrientationTypes.BOTTOM_LEFT: // 4 ctx.transform(1, 0, 0, -1, 0, height); break; case OrientationTypes.LEFT_TOP: // 5 ctx.transform(0, 1, 1, 0, 0, 0); break; case OrientationTypes.RIGHT_TOP: // 6 ctx.transform(0, 1, -1, 0, height, 0); break; case OrientationTypes.RIGHT_BOTTOM: // 7 ctx.transform(0, -1, -1, 0, height, width); break; case OrientationTypes.LEFT_BOTTOM: // 8 ctx.transform(0, -1, 1, 0, 0, width); break; default: break; } // draw image ctx.drawImage(img, 0, 0); // export base64 resolve(canvas.toDataURL()); }; img.onerror = () => { resolve(imageSrc); }; img.src = imageSrc; }); } transform(imageSrc: string, orientation: OrientationTypes): Promise { return FixOrientationPipe.transform(imageSrc, orientation); } }