Merge pull request #175 from selemxmn/display-canvas-contents

Add canvas contents to print

src/lib/ngx-print.base.ts

@@ -112,6 +112,32 @@ export class PrintBase {
  }
  }
 
+ /**
+ * Converts a canvas element to an image and returns its HTML string.
+ *
+ * @param {HTMLCanvasElement} element - The canvas element to convert.
+ * @returns {string} - HTML string of the image.
+ * @private
+ */
+ private canvasToImageHtml(element: HTMLCanvasElement): string {
+ const dataUrl = element.toDataURL();
+ return `<img src="${dataUrl}" style="max-width: 100%;">`;
+ }
+
+ /**
+ * Includes canvas contents in the print section via img tags.
+ *
+ * @param {HTMLCollectionOf<HTMLCanvasElement>} elements - Collection of canvas elements.
+ * @private
+ */
+ private updateCanvasToImage(elements: HTMLCollectionOf<HTMLCanvasElement>): void {
+ for (let i = 0; i < elements.length; i++) {
+ const element = this.canvasToImageHtml(elements[i]);
+ elements[i].insertAdjacentHTML('afterend', element);
+ elements[i].remove();
+ }
+ }
+
  /**
  * Retrieves the HTML content of a specified printing section.
  *
@@ -126,10 +152,12 @@ export class PrintBase {
  const inputEls = printContents.getElementsByTagName('input');
  const selectEls = printContents.getElementsByTagName('select');
  const textAreaEls = printContents.getElementsByTagName('textarea');
+ const canvasEls = printContents.getElementsByTagName('canvas');
 
  this.updateInputDefaults(inputEls);
  this.updateSelectDefaults(selectEls);
  this.updateTextAreaDefaults(textAreaEls);
+ this.updateCanvasToImage(canvasEls);
 
  return printContents.innerHTML;
  }

yarn.lock

@@ -1393,11 +1393,6 @@
  estree-walker "^2.0.2"
  picomatch "^2.3.1"
 
-"@rollup/[email protected]":
- version "4.5.1"
- resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.5.1.tgz"
- integrity sha512-5I3Nz4Sb9TYOtkRwlH0ow+BhMH2vnh38tZ4J4mggE48M/YyJyp/0sPSxhw1UeS1+oBgQ8q7maFtSeKpeRJu41Q==
-
 "@rollup/wasm-node@^4.5.0":
  version "4.5.1"
  resolved "https://registry.npmjs.org/@rollup/wasm-node/-/wasm-node-4.5.1.tgz"
@@ -5465,32 +5460,13 @@ rimraf@^3.0.0, rimraf@^3.0.2:
  dependencies:
  glob "^7.1.3"
 
-rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^2.78.0||^3.0.0||^4.0.0, rollup@^3.27.1:
+rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^2.78.0||^3.0.0||^4.0.0, rollup@^3.27.1, rollup@^4.5.0:
  version "3.29.4"
  resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz"
  integrity sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==
  optionalDependencies:
  fsevents "~2.3.2"
 
-rollup@^4.5.0:
- version "4.5.1"
- resolved "https://registry.npmjs.org/rollup/-/rollup-4.5.1.tgz"
- integrity sha512-0EQribZoPKpb5z1NW/QYm3XSR//Xr8BeEXU49Lc/mQmpmVVG5jPUVrpc2iptup/0WMrY9mzas0fxH+TjYvG2CA==
- optionalDependencies:
- "@rollup/rollup-android-arm-eabi" "4.5.1"
- "@rollup/rollup-android-arm64" "4.5.1"
- "@rollup/rollup-darwin-arm64" "4.5.1"
- "@rollup/rollup-darwin-x64" "4.5.1"
- "@rollup/rollup-linux-arm-gnueabihf" "4.5.1"
- "@rollup/rollup-linux-arm64-gnu" "4.5.1"
- "@rollup/rollup-linux-arm64-musl" "4.5.1"
- "@rollup/rollup-linux-x64-gnu" "4.5.1"
- "@rollup/rollup-linux-x64-musl" "4.5.1"
- "@rollup/rollup-win32-arm64-msvc" "4.5.1"
- "@rollup/rollup-win32-ia32-msvc" "4.5.1"
- "@rollup/rollup-win32-x64-msvc" "4.5.1"
- fsevents "~2.3.2"
-
 run-async@^3.0.0:
  version "3.0.0"
  resolved "https://registry.npmjs.org/run-async/-/run-async-3.0.0.tgz"