load-image.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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, URL, webkitURL, FileReader */
  12. ;(function ($) {
  13. 'use strict'
  14. // Loads an image for a given File object.
  15. // Invokes the callback with an img or optional canvas
  16. // element (if supported by the browser) as parameter:
  17. function loadImage (file, callback, options) {
  18. var img = document.createElement('img')
  19. var url
  20. img.onerror = function (event) {
  21. return loadImage.onerror(img, event, file, callback, options)
  22. }
  23. img.onload = function (event) {
  24. return loadImage.onload(img, event, file, callback, options)
  25. }
  26. if (typeof file === 'string') {
  27. loadImage.fetchBlob(
  28. file,
  29. function (blob) {
  30. if (blob) {
  31. file = blob
  32. url = loadImage.createObjectURL(file)
  33. } else {
  34. url = file
  35. if (options && options.crossOrigin) {
  36. img.crossOrigin = options.crossOrigin
  37. }
  38. }
  39. img.src = url
  40. },
  41. options
  42. )
  43. return img
  44. } else if (
  45. loadImage.isInstanceOf('Blob', file) ||
  46. // Files are also Blob instances, but some browsers
  47. // (Firefox 3.6) support the File API but not Blobs:
  48. loadImage.isInstanceOf('File', file)
  49. ) {
  50. url = img._objectURL = loadImage.createObjectURL(file)
  51. if (url) {
  52. img.src = url
  53. return img
  54. }
  55. return loadImage.readFile(file, function (e) {
  56. var target = e.target
  57. if (target && target.result) {
  58. img.src = target.result
  59. } else if (callback) {
  60. callback(e)
  61. }
  62. })
  63. }
  64. }
  65. // The check for URL.revokeObjectURL fixes an issue with Opera 12,
  66. // which provides URL.createObjectURL but doesn't properly implement it:
  67. var urlAPI =
  68. ($.createObjectURL && $) ||
  69. ($.URL && URL.revokeObjectURL && URL) ||
  70. ($.webkitURL && webkitURL)
  71. function revokeHelper (img, options) {
  72. if (img._objectURL && !(options && options.noRevoke)) {
  73. loadImage.revokeObjectURL(img._objectURL)
  74. delete img._objectURL
  75. }
  76. }
  77. // If the callback given to this function returns a blob, it is used as image
  78. // source instead of the original url and overrides the file argument used in
  79. // the onload and onerror event callbacks:
  80. loadImage.fetchBlob = function (url, callback, options) {
  81. callback()
  82. }
  83. loadImage.isInstanceOf = function (type, obj) {
  84. // Cross-frame instanceof check
  85. return Object.prototype.toString.call(obj) === '[object ' + type + ']'
  86. }
  87. loadImage.transform = function (img, options, callback, file, data) {
  88. callback(img, data)
  89. }
  90. loadImage.onerror = function (img, event, file, callback, options) {
  91. revokeHelper(img, options)
  92. if (callback) {
  93. callback.call(img, event)
  94. }
  95. }
  96. loadImage.onload = function (img, event, file, callback, options) {
  97. revokeHelper(img, options)
  98. if (callback) {
  99. loadImage.transform(img, options, callback, file, {})
  100. }
  101. }
  102. loadImage.createObjectURL = function (file) {
  103. return urlAPI ? urlAPI.createObjectURL(file) : false
  104. }
  105. loadImage.revokeObjectURL = function (url) {
  106. return urlAPI ? urlAPI.revokeObjectURL(url) : false
  107. }
  108. // Loads a given File object via FileReader interface,
  109. // invokes the callback with the event object (load or error).
  110. // The result can be read via event.target.result:
  111. loadImage.readFile = function (file, callback, method) {
  112. if ($.FileReader) {
  113. var fileReader = new FileReader()
  114. fileReader.onload = fileReader.onerror = callback
  115. method = method || 'readAsDataURL'
  116. if (fileReader[method]) {
  117. fileReader[method](file)
  118. return fileReader
  119. }
  120. }
  121. return false
  122. }
  123. if (typeof define === 'function' && define.amd) {
  124. define(function () {
  125. return loadImage
  126. })
  127. } else if (typeof module === 'object' && module.exports) {
  128. module.exports = loadImage
  129. } else {
  130. $.loadImage = loadImage
  131. }
  132. })((typeof window !== 'undefined' && window) || this)