load-image.js 4.1 KB

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