From d12d59b59360699d129cbaf5b4e0d77b1d2280b9 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 25 May 2022 12:26:04 +0200
Subject: [PATCH] [ts][player] Add support for preserving drawing buffer
 contents, updated example accordingly to show screenshotting.

---
 spine-ts/spine-player/example/example.html | 6 ++++++
 spine-ts/spine-player/src/Player.ts        | 6 +++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/spine-ts/spine-player/example/example.html b/spine-ts/spine-player/example/example.html
index b0834b019..4f88a86f1 100644
--- a/spine-ts/spine-player/example/example.html
+++ b/spine-ts/spine-player/example/example.html
@@ -22,7 +22,9 @@
 		<button id="walk">Walk</button>
 		<button id="jump">Jump</button>
 		<button id="roar">Roar</button>
+		<button id="screenshot">Screenshot</button>
 	</div>
+	<img id="screenshot-image" src="" style="width: 400px;">
 </body>
 <script>
 	// Creates a new spine player. The debugRender option enables
@@ -50,6 +52,7 @@
 		premultipliedAlpha: true,
 		backgroundColor: "#00000000",
 		alpha: true,
+		preserveDrawingBuffer: true,
 		defaultMix: 1,
 		controlBones: ["root"],
 		success: (player) => {
@@ -66,6 +69,9 @@
 			document.getElementById("roar").addEventListener("click", event => {
 				jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
 			});
+			document.getElementById("screenshot").addEventListener("click", event => {
+				document.getElementById("screenshot-image").src = player.canvas.toDataURL();
+			});
 		}
 	});
 </script>
diff --git a/spine-ts/spine-player/src/Player.ts b/spine-ts/spine-player/src/Player.ts
index 14e6c8da1..0a84b4b57 100644
--- a/spine-ts/spine-player/src/Player.ts
+++ b/spine-ts/spine-player/src/Player.ts
@@ -114,6 +114,9 @@ export interface SpinePlayerConfig {
 	   backgroundColor alpha is < ff. Default: false */
 	alpha: boolean
 
+	/* Optional: Whether to preserve the drawing buffer. This is needed if you want to take a screenshot via canvas.getDataURL(), Default: false */
+	preserveDrawingBuffer: boolean
+
 	/* Optional: The canvas background color, given in the format #rrggbb or #rrggbbaa. Default: #000000ff (black) or when
 	   alpha is true #00000000 (transparent) */
 	backgroundColor: string
@@ -282,6 +285,7 @@ export class SpinePlayer implements Disposable {
 		if (!config.fullScreenBackgroundColor) config.fullScreenBackgroundColor = config.backgroundColor;
 		if (config.backgroundImage && !config.backgroundImage.url) config.backgroundImage = null;
 		if (config.premultipliedAlpha === void 0) config.premultipliedAlpha = true;
+		if (config.preserveDrawingBuffer === void 0) config.preserveDrawingBuffer = false;
 		if (config.mipmaps === void 0) config.mipmaps = true;
 		if (!config.debug) config.debug = {} as any;
 		if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@@ -309,7 +313,7 @@ export class SpinePlayer implements Disposable {
 		try {
 			// Setup the OpenGL context.
 			this.canvas = findWithClass(dom, "spine-player-canvas") as HTMLCanvasElement;
-			this.context = new ManagedWebGLRenderingContext(this.canvas, { alpha: config.alpha });
+			this.context = new ManagedWebGLRenderingContext(this.canvas, { alpha: config.alpha, preserveDrawingBuffer: config.preserveDrawingBuffer });
 
 			// Setup the scene renderer and loading screen.
 			this.sceneRenderer = new SceneRenderer(this.canvas, this.context, true);