/* * JavaScript Load Image Orientation 1.1.0 * https://github.com/blueimp/JavaScript-Load-Image * * Copyright 2013, Sebastian Tschan * https://blueimp.net * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ /*global define, window */ (function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // Register as an anonymous AMD module: define(['load-image'], factory); } else { // Browser globals: factory(window.loadImage); } }(function (loadImage) { 'use strict'; var originalHasCanvasOption = loadImage.hasCanvasOption, originalTransformCoordinates = loadImage.transformCoordinates, originalGetTransformedOptions = loadImage.getTransformedOptions; // This method is used to determine if the target image // should be a canvas element: loadImage.hasCanvasOption = function (options) { return originalHasCanvasOption.call(loadImage, options) || options.orientation; }; // Transform image orientation based on // the given EXIF orientation option: loadImage.transformCoordinates = function (canvas, options) { originalTransformCoordinates.call(loadImage, canvas, options); var ctx = canvas.getContext('2d'), width = canvas.width, height = canvas.height, orientation = options.orientation; if (!orientation || orientation > 8) { return; } if (orientation > 4) { canvas.width = height; canvas.height = width; } 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; } }; // Transforms coordinate and dimension options // based on the given orientation option: loadImage.getTransformedOptions = function (img, opts) { var options = originalGetTransformedOptions.call(loadImage, img, opts), orientation = options.orientation, newOptions, i; if (!orientation || orientation > 8 || orientation === 1) { return options; } newOptions = {}; for (i in options) { if (options.hasOwnProperty(i)) { newOptions[i] = options[i]; } } switch (options.orientation) { case 2: // horizontal flip newOptions.left = options.right; newOptions.right = options.left; break; case 3: // 180° rotate left newOptions.left = options.right; newOptions.top = options.bottom; newOptions.right = options.left; newOptions.bottom = options.top; break; case 4: // vertical flip newOptions.top = options.bottom; newOptions.bottom = options.top; break; case 5: // vertical flip + 90 rotate right newOptions.left = options.top; newOptions.top = options.left; newOptions.right = options.bottom; newOptions.bottom = options.right; break; case 6: // 90° rotate right newOptions.left = options.top; newOptions.top = options.right; newOptions.right = options.bottom; newOptions.bottom = options.left; break; case 7: // horizontal flip + 90 rotate right newOptions.left = options.bottom; newOptions.top = options.right; newOptions.right = options.top; newOptions.bottom = options.left; break; case 8: // 90° rotate left newOptions.left = options.bottom; newOptions.top = options.left; newOptions.right = options.top; newOptions.bottom = options.right; break; } if (options.orientation > 4) { newOptions.maxWidth = options.maxHeight; newOptions.maxHeight = options.maxWidth; newOptions.minWidth = options.minHeight; newOptions.minHeight = options.minWidth; newOptions.sourceWidth = options.sourceHeight; newOptions.sourceHeight = options.sourceWidth; } return newOptions; }; }));