From fdf02d98033d44c4ba2fff2bb67e94fd62f2552b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nico=20H=C3=B6llerich?= <s1nihoel@uni-bayreuth.de>
Date: Tue, 19 May 2020 23:47:26 +0200
Subject: [PATCH] Improve scene fading performance by using canvas instead of
 Image.

---
 src/js/libpannellum.js |  6 +++++-
 src/js/pannellum.js    | 19 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/js/libpannellum.js b/src/js/libpannellum.js
index 02a2ba7..8e212ce 100644
--- a/src/js/libpannellum.js
+++ b/src/js/libpannellum.js
@@ -899,7 +899,11 @@ function Renderer(container) {
         }
 
         if (params.returnImage !== undefined) {
-            return canvas.toDataURL('image/png');
+            var canv = document.createElement('canvas');
+            canv.width = canvas.width;
+            canv.height = canvas.height;
+            canv.getContext('2d').drawImage(canvas, 0, 0);
+            return canv;
         }
     };
     
diff --git a/src/js/pannellum.js b/src/js/pannellum.js
index a9bbb6d..5fb975c 100644
--- a/src/js/pannellum.js
+++ b/src/js/pannellum.js
@@ -2424,15 +2424,24 @@ function loadScene(sceneId, targetPitch, targetYaw, targetHfov, fadeDone) {
     if (config.sceneFadeDuration && !fadeDone) {
         var data = renderer.render(config.pitch * Math.PI / 180, config.yaw * Math.PI / 180, config.hfov * Math.PI / 180, {returnImage: true});
         if (data !== undefined) {
-            fadeImg = new Image();
+            if (data instanceof HTMLCanvasElement)
+                fadeImg = data;
+            else
+                fadeImg = new Image();
+
             fadeImg.className = 'pnlm-fade-img';
             fadeImg.style.transition = 'opacity ' + (config.sceneFadeDuration / 1000) + 's';
             fadeImg.style.width = '100%';
             fadeImg.style.height = '100%';
-            fadeImg.onload = function() {
-                setTimeout(() => loadScene(sceneId, targetPitch, targetYaw, targetHfov, true), 100); // prevents black flickering before fading
-            };
-            fadeImg.src = data;
+
+            if (data instanceof HTMLCanvasElement)
+                setTimeout(() => loadScene(sceneId, targetPitch, targetYaw, targetHfov, true), 100);
+            else {
+                fadeImg.onload = function () {
+                    setTimeout(() => loadScene(sceneId, targetPitch, targetYaw, targetHfov, true), 100); // prevents black flickering before fading
+                };
+                fadeImg.src = data;
+            }
             renderContainer.appendChild(fadeImg);
             renderer.fadeImg = fadeImg;
             return;