ImageExporter.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-draw-engine-ImageExporter'>/**
  19. </span> * Exports a {@link Ext.draw.Surface Surface} to an image. To do this,
  20. * the svg string must be sent to a remote server and processed.
  21. *
  22. * # Sending the data
  23. *
  24. * A post request is made to the URL. The following fields are sent:
  25. *
  26. * + width: The width of the image
  27. * + height: The height of the image
  28. * + type: The image type to save as, see {@link #supportedTypes}
  29. * + svg: The svg string for the surface
  30. *
  31. * # The response
  32. *
  33. * It is expected that the user will be prompted with an image download.
  34. * As such, the following options should be set on the server:
  35. *
  36. * + Content-Disposition: 'attachment, filename=&quot;chart.png&quot;'
  37. * + Content-Type: 'image/png'
  38. *
  39. * **Important**: By default, chart data is sent to a server operated
  40. * by Sencha to do data processing. You may change this default by
  41. * setting the {@link #defaultUrl} of this class.
  42. */
  43. Ext.define('Ext.draw.engine.ImageExporter', {
  44. singleton: true,
  45. <span id='Ext-draw-engine-ImageExporter-property-defaultUrl'> /**
  46. </span> * @property {String} [defaultUrl=&quot;http://svg.sencha.io&quot;]
  47. * The default URL to submit the form request.
  48. */
  49. defaultUrl: 'http://svg.sencha.io',
  50. <span id='Ext-draw-engine-ImageExporter-property-supportedTypes'> /**
  51. </span> * @property {Array} [supportedTypes=[&quot;image/png&quot;, &quot;image/jpeg&quot;]]
  52. * A list of export types supported by the server
  53. */
  54. supportedTypes: ['image/png', 'image/jpeg'],
  55. <span id='Ext-draw-engine-ImageExporter-property-widthParam'> /**
  56. </span> * @property {String} [widthParam=&quot;width&quot;]
  57. * The name of the width parameter to be sent to the server.
  58. * The Sencha IO server expects it to be the default value.
  59. */
  60. widthParam: 'width',
  61. <span id='Ext-draw-engine-ImageExporter-property-heightParam'> /**
  62. </span> * @property {String} [heightParam=&quot;height&quot;]
  63. * The name of the height parameter to be sent to the server.
  64. * The Sencha IO server expects it to be the default value.
  65. */
  66. heightParam: 'height',
  67. <span id='Ext-draw-engine-ImageExporter-property-typeParam'> /**
  68. </span> * @property {String} [typeParam=&quot;type&quot;]
  69. * The name of the type parameter to be sent to the server.
  70. * The Sencha IO server expects it to be the default value.
  71. */
  72. typeParam: 'type',
  73. <span id='Ext-draw-engine-ImageExporter-property-svgParam'> /**
  74. </span> * @property {String} [svgParam=&quot;svg&quot;]
  75. * The name of the svg parameter to be sent to the server.
  76. * The Sencha IO server expects it to be the default value.
  77. */
  78. svgParam: 'svg',
  79. formCls: Ext.baseCSSPrefix + 'hide-display',
  80. <span id='Ext-draw-engine-ImageExporter-method-generate'> /**
  81. </span> * Exports the surface to an image
  82. * @param {Ext.draw.Surface} surface The surface to export
  83. * @param {Object} [config] The following config options are supported:
  84. *
  85. * @param {Number} config.width A width to send to the server to for
  86. * configuring the image height
  87. *
  88. * @param {Number} config.height A height to send to the server for
  89. * configuring the image height
  90. *
  91. * @param {String} config.url The url to post the data to. Defaults to
  92. * the {@link #defaultUrl} configuration on the class.
  93. *
  94. * @param {String} config.type The type of image to export. See the
  95. * {@link #supportedTypes}
  96. *
  97. * @param {String} config.widthParam The name of the width parameter to send
  98. * to the server. Defaults to {@link #widthParam}
  99. *
  100. * @param {String} config.heightParam The name of the height parameter to send
  101. * to the server. Defaults to {@link #heightParam}
  102. *
  103. * @param {String} config.typeParam The name of the type parameter to send
  104. * to the server. Defaults to {@link #typeParam}
  105. *
  106. * @param {String} config.svgParam The name of the svg parameter to send
  107. * to the server. Defaults to {@link #svgParam}
  108. *
  109. * @return {Boolean} True if the surface was successfully sent to the server.
  110. */
  111. generate: function(surface, config) {
  112. config = config || {};
  113. var me = this,
  114. type = config.type,
  115. form;
  116. if (Ext.Array.indexOf(me.supportedTypes, type) === -1) {
  117. return false;
  118. }
  119. form = Ext.getBody().createChild({
  120. tag: 'form',
  121. method: 'POST',
  122. action: config.url || me.defaultUrl,
  123. cls: me.formCls,
  124. children: [{
  125. tag: 'input',
  126. type: 'hidden',
  127. name: config.widthParam || me.widthParam,
  128. value: config.width || surface.width
  129. }, {
  130. tag: 'input',
  131. type: 'hidden',
  132. name: config.heightParam || me.heightParam,
  133. value: config.height || surface.height
  134. }, {
  135. tag: 'input',
  136. type: 'hidden',
  137. name: config.typeParam || me.typeParam,
  138. value: type
  139. }, {
  140. tag: 'input',
  141. type: 'hidden',
  142. name: config.svgParam || me.svgParam
  143. }]
  144. });
  145. // Assign the data on the value so it doesn't get messed up in the html insertion
  146. form.last(null, true).value = Ext.draw.engine.SvgExporter.generate(surface);
  147. form.dom.submit();
  148. form.remove();
  149. return true;
  150. }
  151. });
  152. </pre>
  153. </body>
  154. </html>