load-image.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /*
  2. * JavaScript Load Image
  3. * https://github.com/blueimp/JavaScript-Load-Image
  4. *
  5. * Copyright 2011, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* global define, webkitURL, module */
  12. ;(function($) {
  13. 'use strict'
  14. /**
  15. * Loads an image for a given File object.
  16. * Invokes the callback with an img or optional canvas element
  17. * (if supported by the browser) as parameter:.
  18. *
  19. * @param {File|Blob|string} file File or Blob object or image URL
  20. * @param {Function} [callback] Image load event callback
  21. * @param {object} [options] Options object
  22. * @returns {HTMLImageElement|HTMLCanvasElement|FileReader} image object
  23. */
  24. function loadImage(file, callback, options) {
  25. var img = document.createElement('img')
  26. var url
  27. img.onerror = function(event) {
  28. return loadImage.onerror(img, event, file, callback, options)
  29. }
  30. img.onload = function(event) {
  31. return loadImage.onload(img, event, file, callback, options)
  32. }
  33. if (typeof file === 'string') {
  34. loadImage.fetchBlob(
  35. file,
  36. function(blob) {
  37. if (blob) {
  38. // eslint-disable-next-line no-param-reassign
  39. file = blob
  40. url = loadImage.createObjectURL(file)
  41. } else {
  42. url = file
  43. if (options && options.crossOrigin) {
  44. img.crossOrigin = options.crossOrigin
  45. }
  46. }
  47. img.src = url
  48. },
  49. options
  50. )
  51. return img
  52. } else if (
  53. loadImage.isInstanceOf('Blob', file) ||
  54. // Files are also Blob instances, but some browsers
  55. // (Firefox 3.6) support the File API but not Blobs:
  56. loadImage.isInstanceOf('File', file)
  57. ) {
  58. url = img._objectURL = loadImage.createObjectURL(file)
  59. if (url) {
  60. img.src = url
  61. return img
  62. }
  63. return loadImage.readFile(file, function(e) {
  64. var target = e.target
  65. if (target && target.result) {
  66. img.src = target.result
  67. } else if (callback) {
  68. callback(e)
  69. }
  70. })
  71. }
  72. }
  73. // The check for URL.revokeObjectURL fixes an issue with Opera 12,
  74. // which provides URL.createObjectURL but doesn't properly implement it:
  75. var urlAPI =
  76. ($.createObjectURL && $) ||
  77. ($.URL && URL.revokeObjectURL && URL) ||
  78. ($.webkitURL && webkitURL)
  79. /**
  80. * Helper function to revoke an object URL
  81. *
  82. * @param {HTMLImageElement} img Image element
  83. * @param {object} [options] Options object
  84. */
  85. function revokeHelper(img, options) {
  86. if (img._objectURL && !(options && options.noRevoke)) {
  87. loadImage.revokeObjectURL(img._objectURL)
  88. delete img._objectURL
  89. }
  90. }
  91. // If the callback given to this function returns a blob, it is used as image
  92. // source instead of the original url and overrides the file argument used in
  93. // the onload and onerror event callbacks:
  94. loadImage.fetchBlob = function(url, callback) {
  95. callback()
  96. }
  97. loadImage.isInstanceOf = function(type, obj) {
  98. // Cross-frame instanceof check
  99. return Object.prototype.toString.call(obj) === '[object ' + type + ']'
  100. }
  101. loadImage.transform = function(img, options, callback, file, data) {
  102. callback(img, data)
  103. }
  104. loadImage.onerror = function(img, event, file, callback, options) {
  105. revokeHelper(img, options)
  106. if (callback) {
  107. callback.call(img, event)
  108. }
  109. }
  110. loadImage.onload = function(img, event, file, callback, options) {
  111. revokeHelper(img, options)
  112. if (callback) {
  113. loadImage.transform(img, options, callback, file, {
  114. originalWidth: img.naturalWidth || img.width,
  115. originalHeight: img.naturalHeight || img.height
  116. })
  117. }
  118. }
  119. loadImage.createObjectURL = function(file) {
  120. return urlAPI ? urlAPI.createObjectURL(file) : false
  121. }
  122. loadImage.revokeObjectURL = function(url) {
  123. return urlAPI ? urlAPI.revokeObjectURL(url) : false
  124. }
  125. // Loads a given File object via FileReader interface,
  126. // invokes the callback with the event object (load or error).
  127. // The result can be read via event.target.result:
  128. loadImage.readFile = function(file, callback, method) {
  129. if ($.FileReader) {
  130. var fileReader = new FileReader()
  131. fileReader.onload = fileReader.onerror = callback
  132. // eslint-disable-next-line no-param-reassign
  133. method = method || 'readAsDataURL'
  134. if (fileReader[method]) {
  135. fileReader[method](file)
  136. return fileReader
  137. }
  138. }
  139. return false
  140. }
  141. if (typeof define === 'function' && define.amd) {
  142. define(function() {
  143. return loadImage
  144. })
  145. } else if (typeof module === 'object' && module.exports) {
  146. module.exports = loadImage
  147. } else {
  148. $.loadImage = loadImage
  149. }
  150. })((typeof window !== 'undefined' && window) || this)