load-image-orientation.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. /*
  2. * JavaScript Load Image Orientation
  3. * https://github.com/blueimp/JavaScript-Load-Image
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* global define */
  12. ;(function (factory) {
  13. 'use strict'
  14. if (typeof define === 'function' && define.amd) {
  15. // Register as an anonymous AMD module:
  16. define(['./load-image', './load-image-scale', './load-image-meta'], factory)
  17. } else if (typeof module === 'object' && module.exports) {
  18. factory(
  19. require('./load-image'),
  20. require('./load-image-scale'),
  21. require('./load-image-meta')
  22. )
  23. } else {
  24. // Browser globals:
  25. factory(window.loadImage)
  26. }
  27. }(function (loadImage) {
  28. 'use strict'
  29. var originalHasCanvasOption = loadImage.hasCanvasOption
  30. var originalHasMetaOption = loadImage.hasMetaOption
  31. var originalTransformCoordinates = loadImage.transformCoordinates
  32. var originalGetTransformedOptions = loadImage.getTransformedOptions
  33. // Determines if the target image should be a canvas element:
  34. loadImage.hasCanvasOption = function (options) {
  35. return !!options.orientation ||
  36. originalHasCanvasOption.call(loadImage, options)
  37. }
  38. // Determines if meta data should be loaded automatically:
  39. loadImage.hasMetaOption = function (options) {
  40. return options && options.orientation === true ||
  41. originalHasMetaOption.call(loadImage, options)
  42. }
  43. // Transform image orientation based on
  44. // the given EXIF orientation option:
  45. loadImage.transformCoordinates = function (canvas, options) {
  46. originalTransformCoordinates.call(loadImage, canvas, options)
  47. var ctx = canvas.getContext('2d')
  48. var width = canvas.width
  49. var height = canvas.height
  50. var styleWidth = canvas.style.width
  51. var styleHeight = canvas.style.height
  52. var orientation = options.orientation
  53. if (!orientation || orientation > 8) {
  54. return
  55. }
  56. if (orientation > 4) {
  57. canvas.width = height
  58. canvas.height = width
  59. canvas.style.width = styleHeight
  60. canvas.style.height = styleWidth
  61. }
  62. switch (orientation) {
  63. case 2:
  64. // horizontal flip
  65. ctx.translate(width, 0)
  66. ctx.scale(-1, 1)
  67. break
  68. case 3:
  69. // 180° rotate left
  70. ctx.translate(width, height)
  71. ctx.rotate(Math.PI)
  72. break
  73. case 4:
  74. // vertical flip
  75. ctx.translate(0, height)
  76. ctx.scale(1, -1)
  77. break
  78. case 5:
  79. // vertical flip + 90 rotate right
  80. ctx.rotate(0.5 * Math.PI)
  81. ctx.scale(1, -1)
  82. break
  83. case 6:
  84. // 90° rotate right
  85. ctx.rotate(0.5 * Math.PI)
  86. ctx.translate(0, -height)
  87. break
  88. case 7:
  89. // horizontal flip + 90 rotate right
  90. ctx.rotate(0.5 * Math.PI)
  91. ctx.translate(width, -height)
  92. ctx.scale(-1, 1)
  93. break
  94. case 8:
  95. // 90° rotate left
  96. ctx.rotate(-0.5 * Math.PI)
  97. ctx.translate(-width, 0)
  98. break
  99. }
  100. }
  101. // Transforms coordinate and dimension options
  102. // based on the given orientation option:
  103. loadImage.getTransformedOptions = function (img, opts, data) {
  104. var options = originalGetTransformedOptions.call(loadImage, img, opts)
  105. var orientation = options.orientation
  106. var newOptions
  107. var i
  108. if (orientation === true && data && data.exif) {
  109. orientation = data.exif.get('Orientation')
  110. }
  111. if (!orientation || orientation > 8 || orientation === 1) {
  112. return options
  113. }
  114. newOptions = {}
  115. for (i in options) {
  116. if (options.hasOwnProperty(i)) {
  117. newOptions[i] = options[i]
  118. }
  119. }
  120. newOptions.orientation = orientation
  121. switch (orientation) {
  122. case 2:
  123. // horizontal flip
  124. newOptions.left = options.right
  125. newOptions.right = options.left
  126. break
  127. case 3:
  128. // 180° rotate left
  129. newOptions.left = options.right
  130. newOptions.top = options.bottom
  131. newOptions.right = options.left
  132. newOptions.bottom = options.top
  133. break
  134. case 4:
  135. // vertical flip
  136. newOptions.top = options.bottom
  137. newOptions.bottom = options.top
  138. break
  139. case 5:
  140. // vertical flip + 90 rotate right
  141. newOptions.left = options.top
  142. newOptions.top = options.left
  143. newOptions.right = options.bottom
  144. newOptions.bottom = options.right
  145. break
  146. case 6:
  147. // 90° rotate right
  148. newOptions.left = options.top
  149. newOptions.top = options.right
  150. newOptions.right = options.bottom
  151. newOptions.bottom = options.left
  152. break
  153. case 7:
  154. // horizontal flip + 90 rotate right
  155. newOptions.left = options.bottom
  156. newOptions.top = options.right
  157. newOptions.right = options.top
  158. newOptions.bottom = options.left
  159. break
  160. case 8:
  161. // 90° rotate left
  162. newOptions.left = options.bottom
  163. newOptions.top = options.left
  164. newOptions.right = options.top
  165. newOptions.bottom = options.right
  166. break
  167. }
  168. if (newOptions.orientation > 4) {
  169. newOptions.maxWidth = options.maxHeight
  170. newOptions.maxHeight = options.maxWidth
  171. newOptions.minWidth = options.minHeight
  172. newOptions.minHeight = options.minWidth
  173. newOptions.sourceWidth = options.sourceHeight
  174. newOptions.sourceHeight = options.sourceWidth
  175. }
  176. return newOptions
  177. }
  178. }))