image.js 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. var LRU = require("../../core/LRU");
  2. var globalImageCache = new LRU(50);
  3. /**
  4. * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
  5. * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
  6. */
  7. function findExistImage(newImageOrSrc) {
  8. if (typeof newImageOrSrc === 'string') {
  9. var cachedImgObj = globalImageCache.get(newImageOrSrc);
  10. return cachedImgObj && cachedImgObj.image;
  11. } else {
  12. return newImageOrSrc;
  13. }
  14. }
  15. /**
  16. * Caution: User should cache loaded images, but not just count on LRU.
  17. * Consider if required images more than LRU size, will dead loop occur?
  18. *
  19. * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
  20. * @param {HTMLImageElement|HTMLCanvasElement|Canvas} image Existent image.
  21. * @param {module:zrender/Element} [hostEl] For calling `dirty`.
  22. * @param {Function} [cb] params: (image, cbPayload)
  23. * @param {Object} [cbPayload] Payload on cb calling.
  24. * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
  25. */
  26. function createOrUpdateImage(newImageOrSrc, image, hostEl, cb, cbPayload) {
  27. if (!newImageOrSrc) {
  28. return image;
  29. } else if (typeof newImageOrSrc === 'string') {
  30. // Image should not be loaded repeatly.
  31. if (image && image.__zrImageSrc === newImageOrSrc || !hostEl) {
  32. return image;
  33. } // Only when there is no existent image or existent image src
  34. // is different, this method is responsible for load.
  35. var cachedImgObj = globalImageCache.get(newImageOrSrc);
  36. var pendingWrap = {
  37. hostEl: hostEl,
  38. cb: cb,
  39. cbPayload: cbPayload
  40. };
  41. if (cachedImgObj) {
  42. image = cachedImgObj.image;
  43. !isImageReady(image) && cachedImgObj.pending.push(pendingWrap);
  44. } else {
  45. image = new Image();
  46. image.onload = image.onerror = imageOnLoad;
  47. globalImageCache.put(newImageOrSrc, image.__cachedImgObj = {
  48. image: image,
  49. pending: [pendingWrap]
  50. });
  51. image.src = image.__zrImageSrc = newImageOrSrc;
  52. }
  53. return image;
  54. } // newImageOrSrc is an HTMLImageElement or HTMLCanvasElement or Canvas
  55. else {
  56. return newImageOrSrc;
  57. }
  58. }
  59. function imageOnLoad() {
  60. var cachedImgObj = this.__cachedImgObj;
  61. this.onload = this.onerror = this.__cachedImgObj = null;
  62. for (var i = 0; i < cachedImgObj.pending.length; i++) {
  63. var pendingWrap = cachedImgObj.pending[i];
  64. var cb = pendingWrap.cb;
  65. cb && cb(this, pendingWrap.cbPayload);
  66. pendingWrap.hostEl.dirty();
  67. }
  68. cachedImgObj.pending.length = 0;
  69. }
  70. function isImageReady(image) {
  71. return image && image.width && image.height;
  72. }
  73. exports.findExistImage = findExistImage;
  74. exports.createOrUpdateImage = createOrUpdateImage;
  75. exports.isImageReady = isImageReady;