[ts] Fix up #1762 for canvas backend.

spine-ts/build/spine-all.d.ts

@@ -636,7 +636,7 @@ declare module spine {
 		private queueAsset;
 		loadText(clientId: string, path: string): void;
 		loadJson(clientId: string, path: string): void;
-		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
 		get(clientId: string, path: string): any;
 		private updateClientAssets;
 		isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
 	abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
-		constructor(image: HTMLImageElement);
+		constructor(image: HTMLImageElement | ImageBitmap);
-		getImage(): HTMLImageElement;
+		getImage(): HTMLImageElement | ImageBitmap;
 		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		abstract dispose(): void;
@@ -1400,7 +1400,7 @@ declare module spine.webgl {
 		private boundUnit;
 		private useMipMaps;
 		static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
-		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -1786,7 +1786,7 @@ declare module spine.webgl {
 		canvas: HTMLCanvasElement | OffscreenCanvas;
 		gl: WebGLRenderingContext;
 		private restorables;
-		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | OffscreenCanvas | WebGL2RenderingContext, contextConfig?: any);
 		addRestorable(restorable: Restorable): void;
 		removeRestorable(restorable: Restorable): void;
 	}

spine-ts/build/spine-all.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
 	var extendStatics = function (d, b) {
 		extendStatics = Object.setPrototypeOf ||
 			({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-			function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+			function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
@@ -3572,15 +3572,35 @@ var spine;
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path))
 				return;
-			var img = new Image();
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = function (ev) {
+			if (isWebWorker) {
-				_this.rawAssets[path] = img;
+				var options = { mode: "cors" };
+				fetch(path, options).then(function (response) {
+					if (!response.ok) {
+						_this.errors[path] = "Couldn't load image " + path;
+					}
+					return response.blob();
+				}).then(function (blob) {
+					return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none'
+					});
+				}).then(function (bitmap) {
+					_this.rawAssets[path] = bitmap;
+				});
+			}
+			else {
+				var img_1 = new Image();
+				img_1.crossOrigin = "anonymous";
+				img_1.onload = function (ev) {
+					_this.rawAssets[path] = img_1;
 				};
-			img.onerror = function (ev) {
+				img_1.onerror = function (ev) {
 					_this.errors[path] = "Couldn't load image " + path;
 				};
-			img.src = path;
+				img_1.src = path;
+			}
 		};
 		SharedAssetManager.prototype.get = function (clientId, path) {
 			path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
 			return clientAssets.assets[path];
 		};
 		SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
 			for (var i = 0; i < clientAssets.toLoad.length; i++) {
 				var path = clientAssets.toLoad[i];
 				var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
 					var rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined)
 						continue;
+					if (isWebWorker) {
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+						}
+						else {
+							clientAssets.assets[path] = rawAsset;
+						}
+					}
+					else {
 						if (rawAsset instanceof HTMLImageElement) {
 							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
 						}
@@ -3605,6 +3636,7 @@ var spine;
 						}
 					}
 				}
+			}
 		};
 		SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
 			var clientAssets = this.clientAssets[clientId];
@@ -11000,7 +11032,7 @@ var spine;
 				var _this = this;
 				if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
 				this.restorables = new Array();
-				if (canvasOrContext instanceof HTMLCanvasElement) {
+				if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
 					var canvas_1 = canvasOrContext;
 					this.gl = (canvas_1.getContext("webgl2", contextConfig) || canvas_1.getContext("webgl", contextConfig));
 					this.canvas = canvas_1;

spine-ts/build/spine-canvas.d.ts

@@ -636,7 +636,7 @@ declare module spine {
 		private queueAsset;
 		loadText(clientId: string, path: string): void;
 		loadJson(clientId: string, path: string): void;
-		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
 		get(clientId: string, path: string): any;
 		private updateClientAssets;
 		isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
 	abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
-		constructor(image: HTMLImageElement);
+		constructor(image: HTMLImageElement | ImageBitmap);
-		getImage(): HTMLImageElement;
+		getImage(): HTMLImageElement | ImageBitmap;
 		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		abstract dispose(): void;

spine-ts/build/spine-canvas.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
 	var extendStatics = function (d, b) {
 		extendStatics = Object.setPrototypeOf ||
 			({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-			function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+			function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
@@ -3572,15 +3572,35 @@ var spine;
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path))
 				return;
-			var img = new Image();
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = function (ev) {
+			if (isWebWorker) {
-				_this.rawAssets[path] = img;
+				var options = { mode: "cors" };
+				fetch(path, options).then(function (response) {
+					if (!response.ok) {
+						_this.errors[path] = "Couldn't load image " + path;
+					}
+					return response.blob();
+				}).then(function (blob) {
+					return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none'
+					});
+				}).then(function (bitmap) {
+					_this.rawAssets[path] = bitmap;
+				});
+			}
+			else {
+				var img_1 = new Image();
+				img_1.crossOrigin = "anonymous";
+				img_1.onload = function (ev) {
+					_this.rawAssets[path] = img_1;
 				};
-			img.onerror = function (ev) {
+				img_1.onerror = function (ev) {
 					_this.errors[path] = "Couldn't load image " + path;
 				};
-			img.src = path;
+				img_1.src = path;
+			}
 		};
 		SharedAssetManager.prototype.get = function (clientId, path) {
 			path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
 			return clientAssets.assets[path];
 		};
 		SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
 			for (var i = 0; i < clientAssets.toLoad.length; i++) {
 				var path = clientAssets.toLoad[i];
 				var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
 					var rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined)
 						continue;
+					if (isWebWorker) {
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+						}
+						else {
+							clientAssets.assets[path] = rawAsset;
+						}
+					}
+					else {
 						if (rawAsset instanceof HTMLImageElement) {
 							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
 						}
@@ -3605,6 +3636,7 @@ var spine;
 						}
 					}
 				}
+			}
 		};
 		SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
 			var clientAssets = this.clientAssets[clientId];

spine-ts/build/spine-core.d.ts

@@ -636,7 +636,7 @@ declare module spine {
 		private queueAsset;
 		loadText(clientId: string, path: string): void;
 		loadJson(clientId: string, path: string): void;
-		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
 		get(clientId: string, path: string): any;
 		private updateClientAssets;
 		isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
 	abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
-		constructor(image: HTMLImageElement);
+		constructor(image: HTMLImageElement | ImageBitmap);
-		getImage(): HTMLImageElement;
+		getImage(): HTMLImageElement | ImageBitmap;
 		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		abstract dispose(): void;

spine-ts/build/spine-core.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
 	var extendStatics = function (d, b) {
 		extendStatics = Object.setPrototypeOf ||
 			({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-			function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+			function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
@@ -3572,15 +3572,35 @@ var spine;
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path))
 				return;
-			var img = new Image();
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = function (ev) {
+			if (isWebWorker) {
-				_this.rawAssets[path] = img;
+				var options = { mode: "cors" };
+				fetch(path, options).then(function (response) {
+					if (!response.ok) {
+						_this.errors[path] = "Couldn't load image " + path;
+					}
+					return response.blob();
+				}).then(function (blob) {
+					return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none'
+					});
+				}).then(function (bitmap) {
+					_this.rawAssets[path] = bitmap;
+				});
+			}
+			else {
+				var img_1 = new Image();
+				img_1.crossOrigin = "anonymous";
+				img_1.onload = function (ev) {
+					_this.rawAssets[path] = img_1;
 				};
-			img.onerror = function (ev) {
+				img_1.onerror = function (ev) {
 					_this.errors[path] = "Couldn't load image " + path;
 				};
-			img.src = path;
+				img_1.src = path;
+			}
 		};
 		SharedAssetManager.prototype.get = function (clientId, path) {
 			path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
 			return clientAssets.assets[path];
 		};
 		SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
 			for (var i = 0; i < clientAssets.toLoad.length; i++) {
 				var path = clientAssets.toLoad[i];
 				var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
 					var rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined)
 						continue;
+					if (isWebWorker) {
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+						}
+						else {
+							clientAssets.assets[path] = rawAsset;
+						}
+					}
+					else {
 						if (rawAsset instanceof HTMLImageElement) {
 							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
 						}
@@ -3605,6 +3636,7 @@ var spine;
 						}
 					}
 				}
+			}
 		};
 		SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
 			var clientAssets = this.clientAssets[clientId];

spine-ts/build/spine-player.d.ts

@@ -636,7 +636,7 @@ declare module spine {
 		private queueAsset;
 		loadText(clientId: string, path: string): void;
 		loadJson(clientId: string, path: string): void;
-		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
 		get(clientId: string, path: string): any;
 		private updateClientAssets;
 		isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
 	abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
-		constructor(image: HTMLImageElement);
+		constructor(image: HTMLImageElement | ImageBitmap);
-		getImage(): HTMLImageElement;
+		getImage(): HTMLImageElement | ImageBitmap;
 		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		abstract dispose(): void;
@@ -1369,7 +1369,7 @@ declare module spine.webgl {
 		private boundUnit;
 		private useMipMaps;
 		static DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL: boolean;
-		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement, useMipMaps?: boolean);
+		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap, useMipMaps?: boolean);
 		setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		static validateMagFilter(magFilter: TextureFilter): TextureFilter.Nearest | TextureFilter.Linear | TextureFilter.Linear;
 		setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
@@ -1755,7 +1755,7 @@ declare module spine.webgl {
 		canvas: HTMLCanvasElement | OffscreenCanvas;
 		gl: WebGLRenderingContext;
 		private restorables;
-		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext, contextConfig?: any);
+		constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | OffscreenCanvas | WebGL2RenderingContext, contextConfig?: any);
 		addRestorable(restorable: Restorable): void;
 		removeRestorable(restorable: Restorable): void;
 	}

spine-ts/build/spine-player.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
 	var extendStatics = function (d, b) {
 		extendStatics = Object.setPrototypeOf ||
 			({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-			function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+			function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
@@ -3572,15 +3572,35 @@ var spine;
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path))
 				return;
-			var img = new Image();
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = function (ev) {
+			if (isWebWorker) {
-				_this.rawAssets[path] = img;
+				var options = { mode: "cors" };
+				fetch(path, options).then(function (response) {
+					if (!response.ok) {
+						_this.errors[path] = "Couldn't load image " + path;
+					}
+					return response.blob();
+				}).then(function (blob) {
+					return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none'
+					});
+				}).then(function (bitmap) {
+					_this.rawAssets[path] = bitmap;
+				});
+			}
+			else {
+				var img_1 = new Image();
+				img_1.crossOrigin = "anonymous";
+				img_1.onload = function (ev) {
+					_this.rawAssets[path] = img_1;
 				};
-			img.onerror = function (ev) {
+				img_1.onerror = function (ev) {
 					_this.errors[path] = "Couldn't load image " + path;
 				};
-			img.src = path;
+				img_1.src = path;
+			}
 		};
 		SharedAssetManager.prototype.get = function (clientId, path) {
 			path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
 			return clientAssets.assets[path];
 		};
 		SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
 			for (var i = 0; i < clientAssets.toLoad.length; i++) {
 				var path = clientAssets.toLoad[i];
 				var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
 					var rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined)
 						continue;
+					if (isWebWorker) {
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+						}
+						else {
+							clientAssets.assets[path] = rawAsset;
+						}
+					}
+					else {
 						if (rawAsset instanceof HTMLImageElement) {
 							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
 						}
@@ -3605,6 +3636,7 @@ var spine;
 						}
 					}
 				}
+			}
 		};
 		SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
 			var clientAssets = this.clientAssets[clientId];
@@ -10732,7 +10764,7 @@ var spine;
 				var _this = this;
 				if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
 				this.restorables = new Array();
-				if (canvasOrContext instanceof HTMLCanvasElement) {
+				if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) {
 					var canvas = canvasOrContext;
 					this.gl = (canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
 					this.canvas = canvas;

spine-ts/build/spine-threejs.d.ts

@@ -636,7 +636,7 @@ declare module spine {
 		private queueAsset;
 		loadText(clientId: string, path: string): void;
 		loadJson(clientId: string, path: string): void;
-		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
+		loadTexture(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): void;
 		get(clientId: string, path: string): any;
 		private updateClientAssets;
 		isLoadingComplete(clientId: string): boolean;
@@ -881,9 +881,9 @@ declare module spine {
 }
 declare module spine {
 	abstract class Texture {
-		protected _image: HTMLImageElement;
+		protected _image: HTMLImageElement | ImageBitmap;
-		constructor(image: HTMLImageElement);
+		constructor(image: HTMLImageElement | ImageBitmap);
-		getImage(): HTMLImageElement;
+		getImage(): HTMLImageElement | ImageBitmap;
 		abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
 		abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
 		abstract dispose(): void;

spine-ts/build/spine-threejs.js

@@ -2,7 +2,7 @@ var __extends = (this && this.__extends) || (function () {
 	var extendStatics = function (d, b) {
 		extendStatics = Object.setPrototypeOf ||
 			({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-			function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+			function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
 		return extendStatics(d, b);
 	};
 	return function (d, b) {
@@ -3572,15 +3572,35 @@ var spine;
 			path = this.pathPrefix + path;
 			if (!this.queueAsset(clientId, textureLoader, path))
 				return;
-			var img = new Image();
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = function (ev) {
+			if (isWebWorker) {
-				_this.rawAssets[path] = img;
+				var options = { mode: "cors" };
+				fetch(path, options).then(function (response) {
+					if (!response.ok) {
+						_this.errors[path] = "Couldn't load image " + path;
+					}
+					return response.blob();
+				}).then(function (blob) {
+					return createImageBitmap(blob, {
+						premultiplyAlpha: 'none',
+						colorSpaceConversion: 'none'
+					});
+				}).then(function (bitmap) {
+					_this.rawAssets[path] = bitmap;
+				});
+			}
+			else {
+				var img_1 = new Image();
+				img_1.crossOrigin = "anonymous";
+				img_1.onload = function (ev) {
+					_this.rawAssets[path] = img_1;
 				};
-			img.onerror = function (ev) {
+				img_1.onerror = function (ev) {
 					_this.errors[path] = "Couldn't load image " + path;
 				};
-			img.src = path;
+				img_1.src = path;
+			}
 		};
 		SharedAssetManager.prototype.get = function (clientId, path) {
 			path = this.pathPrefix + path;
@@ -3590,6 +3610,8 @@ var spine;
 			return clientAssets.assets[path];
 		};
 		SharedAssetManager.prototype.updateClientAssets = function (clientAssets) {
+			var isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
+			var isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
 			for (var i = 0; i < clientAssets.toLoad.length; i++) {
 				var path = clientAssets.toLoad[i];
 				var asset = clientAssets.assets[path];
@@ -3597,6 +3619,15 @@ var spine;
 					var rawAsset = this.rawAssets[path];
 					if (rawAsset === null || rawAsset === undefined)
 						continue;
+					if (isWebWorker) {
+						if (rawAsset instanceof ImageBitmap) {
+							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
+						}
+						else {
+							clientAssets.assets[path] = rawAsset;
+						}
+					}
+					else {
 						if (rawAsset instanceof HTMLImageElement) {
 							clientAssets.assets[path] = clientAssets.textureLoader(rawAsset);
 						}
@@ -3605,6 +3636,7 @@ var spine;
 						}
 					}
 				}
+			}
 		};
 		SharedAssetManager.prototype.isLoadingComplete = function (clientId) {
 			var clientAssets = this.clientAssets[clientId];

spine-ts/canvas/src/SkeletonRenderer.ts

@@ -66,7 +66,7 @@ module spine.canvas {
 				if (attachment instanceof RegionAttachment) {
 					regionAttachment = <RegionAttachment>attachment;
 					region = <TextureAtlasRegion>regionAttachment.region;
-					image = (<CanvasTexture>region.texture).getImage();
+					image = (<CanvasTexture>region.texture).getImage() as HTMLImageElement;
 				} else continue;
 
 				let skeleton = slot.bone.skeleton;
@@ -131,13 +131,13 @@ module spine.canvas {
 					vertices = this.computeRegionVertices(slot, regionAttachment, false);
 					triangles = SkeletonRenderer.QUAD_TRIANGLES;
 					region = <TextureAtlasRegion>regionAttachment.region;
-					texture = (<CanvasTexture>region.texture).getImage();
+					texture = (<CanvasTexture>region.texture).getImage() as HTMLImageElement;
 
 				} else if (attachment instanceof MeshAttachment) {
 					let mesh = <MeshAttachment>attachment;
 					vertices = this.computeMeshVertices(slot, mesh, false);
 					triangles = mesh.triangles;
-					texture = (<TextureAtlasRegion>mesh.region.renderObject).texture.getImage();
+					texture = (<TextureAtlasRegion>mesh.region.renderObject).texture.getImage() as HTMLImageElement;
 				} else continue;
 
 				if (texture != null) {