load-image-orientation.js 4.9 KB

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