Source: extract/canvas/CanvasExtract.js

extract/canvas/CanvasExtract.js

  1. import * as core from '../../core';
  2. //引入小程序补丁
  3. import { Image } from '@ali/pixi-miniprogram-adapter';
  4. const TEMP_RECT = new core.Rectangle();
  5. /**
  6. * The extract manager provides functionality to export content from the renderers.
  7. *
  8. * An instance of this class is automatically created by default, and can be found at renderer.plugins.extract
  9. *
  10. * @class
  11. * @memberof PIXI.extract
  12. */
  13. export default class CanvasExtract
  14. {
  15. /**
  16. * @param {PIXI.CanvasRenderer} renderer - A reference to the current renderer
  17. */
  18. constructor(renderer)
  19. {
  20. this.renderer = renderer;
  21. /**
  22. * Collection of methods for extracting data (image, pixels, etc.) from a display object or render texture
  23. *
  24. * @member {PIXI.extract.CanvasExtract} extract
  25. * @memberof PIXI.CanvasRenderer#
  26. * @see PIXI.extract.CanvasExtract
  27. */
  28. renderer.extract = this;
  29. }
  30. /**
  31. * Will return a HTML Image of the target
  32. *
  33. * @param {PIXI.DisplayObject|PIXI.RenderTexture} target - A displayObject or renderTexture
  34. * to convert. If left empty will use use the main renderer
  35. * @return {HTMLImageElement} HTML Image of the target
  36. */
  37. image(target)
  38. {
  39. const image = new Image();
  40. image.src = this.base64(target);
  41. return image;
  42. }
  43. /**
  44. * Will return a a base64 encoded string of this target. It works by calling
  45. * `CanvasExtract.getCanvas` and then running toDataURL on that.
  46. *
  47. * @param {PIXI.DisplayObject|PIXI.RenderTexture} target - A displayObject or renderTexture
  48. * to convert. If left empty will use use the main renderer
  49. * @return {string} A base64 encoded string of the texture.
  50. */
  51. base64(target)
  52. {
  53. return this.canvas(target).toDataURL();
  54. }
  55. /**
  56. * Creates a Canvas element, renders this target to it and then returns it.
  57. *
  58. * @param {PIXI.DisplayObject|PIXI.RenderTexture} target - A displayObject or renderTexture
  59. * to convert. If left empty will use use the main renderer
  60. * @return {HTMLCanvasElement} A Canvas element with the texture rendered on.
  61. */
  62. canvas(target)
  63. {
  64. const renderer = this.renderer;
  65. let context;
  66. let resolution;
  67. let frame;
  68. let renderTexture;
  69. if (target)
  70. {
  71. if (target instanceof core.RenderTexture)
  72. {
  73. renderTexture = target;
  74. }
  75. else
  76. {
  77. renderTexture = renderer.generateTexture(target);
  78. }
  79. }
  80. if (renderTexture)
  81. {
  82. context = renderTexture.baseTexture._canvasRenderTarget.context;
  83. resolution = renderTexture.baseTexture._canvasRenderTarget.resolution;
  84. frame = renderTexture.frame;
  85. }
  86. else
  87. {
  88. context = renderer.rootContext;
  89. resolution = renderer.resolution;
  90. frame = TEMP_RECT;
  91. frame.width = this.renderer.width;
  92. frame.height = this.renderer.height;
  93. }
  94. const width = Math.floor((frame.width * resolution) + 1e-4);
  95. const height = Math.floor((frame.height * resolution) + 1e-4);
  96. const canvasBuffer = new core.CanvasRenderTarget(width, height, 1);
  97. const canvasData = context.getImageData(frame.x * resolution, frame.y * resolution, width, height);
  98. canvasBuffer.context.putImageData(canvasData, 0, 0);
  99. // send the canvas back..
  100. return canvasBuffer.canvas;
  101. }
  102. /**
  103. * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
  104. * order, with integer values between 0 and 255 (included).
  105. *
  106. * @param {PIXI.DisplayObject|PIXI.RenderTexture} target - A displayObject or renderTexture
  107. * to convert. If left empty will use use the main renderer
  108. * @return {Uint8ClampedArray} One-dimensional array containing the pixel data of the entire texture
  109. */
  110. pixels(target)
  111. {
  112. const renderer = this.renderer;
  113. let context;
  114. let resolution;
  115. let frame;
  116. let renderTexture;
  117. if (target)
  118. {
  119. if (target instanceof core.RenderTexture)
  120. {
  121. renderTexture = target;
  122. }
  123. else
  124. {
  125. renderTexture = renderer.generateTexture(target);
  126. }
  127. }
  128. if (renderTexture)
  129. {
  130. context = renderTexture.baseTexture._canvasRenderTarget.context;
  131. resolution = renderTexture.baseTexture._canvasRenderTarget.resolution;
  132. frame = renderTexture.frame;
  133. }
  134. else
  135. {
  136. context = renderer.rootContext;
  137. frame = TEMP_RECT;
  138. frame.width = renderer.width;
  139. frame.height = renderer.height;
  140. }
  141. return context.getImageData(0, 0, frame.width * resolution, frame.height * resolution).data;
  142. }
  143. /**
  144. * Destroys the extract
  145. *
  146. */
  147. destroy()
  148. {
  149. this.renderer.extract = null;
  150. this.renderer = null;
  151. }
  152. }
  153. core.CanvasRenderer.registerPlugin('extract', CanvasExtract);