forked from qwerty/tupali
167 lines
5.2 KiB
JavaScript
167 lines
5.2 KiB
JavaScript
/*
|
|
* 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;
|
|
};
|
|
|
|
}));
|