Source

libs/screenshot.js

  1. import * as alerts from './alerts';
  2. import html2canvas from 'html2canvas';
  3. /**
  4. * @category Libs
  5. * @class ScreenshotLib
  6. *
  7. * object necesary to take one app full screenshot
  8. */
  9. export class ScreenShot {
  10. constructor(settings = {}) {
  11. this.settings = Object.assign(
  12. {
  13. callback: null,
  14. method: 'w', // 'w'|'d' - New Window or Download
  15. name: 'LtScreenShot',
  16. target: $('body')[0],
  17. excluded: [],
  18. flash: true,
  19. debug: false,
  20. },
  21. settings
  22. );
  23. this.DOMURL = window.URL || window.webkitURL || window;
  24. }
  25. /**
  26. * Take the screenshot
  27. *
  28. * @returns undefined
  29. */
  30. take() {
  31. if (this.settings.flash) {
  32. this.flash().then(() => {
  33. this.createImage();
  34. });
  35. } else {
  36. this.createImage();
  37. }
  38. this.beforeScreenshot();
  39. }
  40. /**
  41. * Open a new window with the image
  42. *
  43. * @param {String} dataUrl Image data
  44. * @returns undefined
  45. */
  46. toNewWindow(dataUrl) {
  47. let image = new Image();
  48. image.src = dataUrl;
  49. let openWindow = window.open(`${this.name}`);
  50. if (openWindow) {
  51. openWindow.document.open('text/html', 'replace');
  52. openWindow.document.write(image.outerHTML);
  53. openWindow.document.close();
  54. } else {
  55. alerts
  56. .error(
  57. `Couldn't create a new window, check your pop-ups
  58. blocking preferences.`
  59. )
  60. .replace(/\n/gm, '');
  61. }
  62. }
  63. /**
  64. * Create a link and download the image
  65. * @param {String} dataUrl Image data
  66. */
  67. toDownload(dataUrl) {
  68. let anchor = document.createElement('a');
  69. anchor.href = dataUrl;
  70. anchor.download = `${this.name}.png`;
  71. document.body.appendChild(anchor);
  72. anchor.click();
  73. anchor.remove();
  74. }
  75. /**
  76. * Before screenshot
  77. */
  78. beforeScreenshot() {
  79. // Hide all elements
  80. for (let elem of this.settings.excluded) $(elem).hide();
  81. }
  82. /**
  83. * After screenshot
  84. */
  85. afterScreenshot() {
  86. // Show all elements excluded before
  87. for (let elem of this.settings.excluded) $(elem).show();
  88. // Callback for after render
  89. if (this.settings.callback) this.settings.callback();
  90. }
  91. /**
  92. * Create the image
  93. */
  94. createImage() {
  95. html2canvas(this.settings.target, {
  96. async: true,
  97. logging: this.settings.debug,
  98. useCORS: true,
  99. allowTaint: false,
  100. scale: 1,
  101. onclone(document) {
  102. if (window.chrome) {
  103. var transform = $(document)
  104. .find('.gm-style>div:first>div')
  105. .css('transform');
  106. if (transform) {
  107. // var comp=transform.split(","); //split up the transform matrix
  108. // var mapright=parseFloat(comp[3]);
  109. // var mapleft=parseFloat(comp[4]); //get left value
  110. // var maptop=parseFloat(comp[5]); //get top value
  111. // var mapbottom=parseFloat(comp[6]);
  112. $(document).find('.gm-style>div:first>div:first>div:last>div').css({
  113. //get the map container. not sure if stable
  114. transform: transform,
  115. top: 0,
  116. left: 0,
  117. });
  118. }
  119. }
  120. },
  121. })
  122. .then((canvas) => {
  123. const dataUrl = canvas.toDataURL();
  124. if (this.settings.method === 'w') {
  125. // If mode is new window
  126. this.toNewWindow(dataUrl);
  127. } else if (this.settings.method === 'd') {
  128. // If mode is download
  129. this.toDownload(dataUrl);
  130. }
  131. this.afterScreenshot();
  132. })
  133. .catch((err) => {
  134. console.error(`Error with screenshot module on toPng function.`);
  135. // console.error(err);
  136. this.afterScreenshot();
  137. });
  138. }
  139. /**
  140. * Do flash effect
  141. */
  142. flash() {
  143. const $el = $(this.settings.target);
  144. let lt_vapp = document.getElementsByClassName('lt-vapp')[0];
  145. let overlay = document.createElement('div');
  146. lt_vapp.appendChild(overlay);
  147. overlay.classList.add('lt-vapp-flashing');
  148. $(overlay).css({
  149. top: $el.position().top,
  150. left: $el.position().left,
  151. width: $el.width(),
  152. height: $el.height(),
  153. });
  154. if ($el.hasClass('lt-vapp')) {
  155. $(overlay).css({
  156. left: $el.position().left - $('#main-navigation').width(),
  157. });
  158. }
  159. return new Promise(function (resolve) {
  160. $(overlay).fadeOut(600, () => {
  161. overlay.parentNode.removeChild(overlay);
  162. resolve();
  163. });
  164. });
  165. }
  166. }
  167. /**
  168. * Take Widget ScreenShot
  169. *
  170. * @category Libs
  171. * @function takeElementScreenShot
  172. *
  173. * @param {object} el - Dom element for the screenshot
  174. * @param {string} color - Property for widget background before capture
  175. */
  176. export function takeElementScreenShot(el, callback = null, options = {}) {
  177. options = Object.assign(
  178. {
  179. delay: 0,
  180. },
  181. options
  182. );
  183. setTimeout(() => {
  184. let excluded = [$('.lt-vapp-config')[0]];
  185. new ScreenShot({
  186. target: el,
  187. excluded: excluded,
  188. callback: callback,
  189. }).take();
  190. }, options.delay);
  191. }
  192. export default {
  193. takeElementScreenShot,
  194. };