選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
 
 

230 行
6.5 KiB

  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, module, Promise */
  12. ;(function ($) {
  13. 'use strict'
  14. var urlAPI = $.URL || $.webkitURL
  15. /**
  16. * Creates an object URL for a given File object.
  17. *
  18. * @param {Blob} blob Blob object
  19. * @returns {string|boolean} Returns object URL if API exists, else false.
  20. */
  21. function createObjectURL(blob) {
  22. return urlAPI ? urlAPI.createObjectURL(blob) : false
  23. }
  24. /**
  25. * Revokes a given object URL.
  26. *
  27. * @param {string} url Blob object URL
  28. * @returns {undefined|boolean} Returns undefined if API exists, else false.
  29. */
  30. function revokeObjectURL(url) {
  31. return urlAPI ? urlAPI.revokeObjectURL(url) : false
  32. }
  33. /**
  34. * Helper function to revoke an object URL
  35. *
  36. * @param {string} url Blob Object URL
  37. * @param {object} [options] Options object
  38. */
  39. function revokeHelper(url, options) {
  40. if (url && url.slice(0, 5) === 'blob:' && !(options && options.noRevoke)) {
  41. revokeObjectURL(url)
  42. }
  43. }
  44. /**
  45. * Loads a given File object via FileReader interface.
  46. *
  47. * @param {Blob} file Blob object
  48. * @param {Function} onload Load event callback
  49. * @param {Function} [onerror] Error/Abort event callback
  50. * @param {string} [method=readAsDataURL] FileReader method
  51. * @returns {FileReader|boolean} Returns FileReader if API exists, else false.
  52. */
  53. function readFile(file, onload, onerror, method) {
  54. if (!$.FileReader) return false
  55. var reader = new FileReader()
  56. reader.onload = function () {
  57. onload.call(reader, this.result)
  58. }
  59. if (onerror) {
  60. reader.onabort = reader.onerror = function () {
  61. onerror.call(reader, this.error)
  62. }
  63. }
  64. var readerMethod = reader[method || 'readAsDataURL']
  65. if (readerMethod) {
  66. readerMethod.call(reader, file)
  67. return reader
  68. }
  69. }
  70. /**
  71. * Cross-frame instanceof check.
  72. *
  73. * @param {string} type Instance type
  74. * @param {object} obj Object instance
  75. * @returns {boolean} Returns true if the object is of the given instance.
  76. */
  77. function isInstanceOf(type, obj) {
  78. // Cross-frame instanceof check
  79. return Object.prototype.toString.call(obj) === '[object ' + type + ']'
  80. }
  81. /**
  82. * @typedef { HTMLImageElement|HTMLCanvasElement } Result
  83. */
  84. /**
  85. * Loads an image for a given File object.
  86. *
  87. * @param {Blob|string} file Blob object or image URL
  88. * @param {Function|object} [callback] Image load event callback or options
  89. * @param {object} [options] Options object
  90. * @returns {HTMLImageElement|FileReader|Promise<Result>} Object
  91. */
  92. function loadImage(file, callback, options) {
  93. /**
  94. * Promise executor
  95. *
  96. * @param {Function} resolve Resolution function
  97. * @param {Function} reject Rejection function
  98. * @returns {HTMLImageElement|FileReader} Object
  99. */
  100. function executor(resolve, reject) {
  101. var img = document.createElement('img')
  102. var url
  103. /**
  104. * Callback for the fetchBlob call.
  105. *
  106. * @param {HTMLImageElement|HTMLCanvasElement} img Error object
  107. * @param {object} data Data object
  108. * @returns {undefined} Undefined
  109. */
  110. function resolveWrapper(img, data) {
  111. if (resolve === reject) {
  112. // Not using Promises
  113. if (resolve) resolve(img, data)
  114. return
  115. } else if (img instanceof Error) {
  116. reject(img)
  117. return
  118. }
  119. data = data || {} // eslint-disable-line no-param-reassign
  120. data.image = img
  121. resolve(data)
  122. }
  123. /**
  124. * Callback for the fetchBlob call.
  125. *
  126. * @param {Blob} blob Blob object
  127. * @param {Error} err Error object
  128. */
  129. function fetchBlobCallback(blob, err) {
  130. if (err && $.console) console.log(err) // eslint-disable-line no-console
  131. if (blob && isInstanceOf('Blob', blob)) {
  132. file = blob // eslint-disable-line no-param-reassign
  133. url = createObjectURL(file)
  134. } else {
  135. url = file
  136. if (options && options.crossOrigin) {
  137. img.crossOrigin = options.crossOrigin
  138. }
  139. }
  140. img.src = url
  141. }
  142. img.onerror = function (event) {
  143. revokeHelper(url, options)
  144. if (reject) reject.call(img, event)
  145. }
  146. img.onload = function () {
  147. revokeHelper(url, options)
  148. var data = {
  149. originalWidth: img.naturalWidth || img.width,
  150. originalHeight: img.naturalHeight || img.height
  151. }
  152. try {
  153. loadImage.transform(img, options, resolveWrapper, file, data)
  154. } catch (error) {
  155. if (reject) reject(error)
  156. }
  157. }
  158. if (typeof file === 'string') {
  159. if (loadImage.requiresMetaData(options)) {
  160. loadImage.fetchBlob(file, fetchBlobCallback, options)
  161. } else {
  162. fetchBlobCallback()
  163. }
  164. return img
  165. } else if (isInstanceOf('Blob', file) || isInstanceOf('File', file)) {
  166. url = createObjectURL(file)
  167. if (url) {
  168. img.src = url
  169. return img
  170. }
  171. return readFile(
  172. file,
  173. function (url) {
  174. img.src = url
  175. },
  176. reject
  177. )
  178. }
  179. }
  180. if ($.Promise && typeof callback !== 'function') {
  181. options = callback // eslint-disable-line no-param-reassign
  182. return new Promise(executor)
  183. }
  184. return executor(callback, callback)
  185. }
  186. // Determines if metadata should be loaded automatically.
  187. // Requires the load image meta extension to load metadata.
  188. loadImage.requiresMetaData = function (options) {
  189. return options && options.meta
  190. }
  191. // If the callback given to this function returns a blob, it is used as image
  192. // source instead of the original url and overrides the file argument used in
  193. // the onload and onerror event callbacks:
  194. loadImage.fetchBlob = function (url, callback) {
  195. callback()
  196. }
  197. loadImage.transform = function (img, options, callback, file, data) {
  198. callback(img, data)
  199. }
  200. loadImage.global = $
  201. loadImage.readFile = readFile
  202. loadImage.isInstanceOf = isInstanceOf
  203. loadImage.createObjectURL = createObjectURL
  204. loadImage.revokeObjectURL = revokeObjectURL
  205. if (typeof define === 'function' && define.amd) {
  206. define(function () {
  207. return loadImage
  208. })
  209. } else if (typeof module === 'object' && module.exports) {
  210. module.exports = loadImage
  211. } else {
  212. $.loadImage = loadImage
  213. }
  214. })((typeof window !== 'undefined' && window) || this)