load-image-orientation.js 5.2 KB

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