load a preview image but keep splat

jeromebg · September 29, 2025 at 5:10 PM

Hi,
I'm trying to add the possibility to add a background image in the drag'n'drop example.
Problem is that the image.splats.url is created with:
var fileURL = URL.createObjectURL(file);
var bloburl_with_filename = fileURL + "#" + file.name;

so when trying to add a image.preview and reloading :
targetkrpano1.image.reset("copy");
targetkrpano1.call("set(image.objectsize, 0)");
targetkrpano1.call("set(image.preview.type, SPHERE)");
targetkrpano1.call("set(image.preview.url, '" + imageDataUrl + "')");
targetkrpano1.actions.loadpanoimage("KEEP3D|IMAGEONLY");
targetkrpano1.view.reset();

It returns :
ERROR: loading of 'my_splat.ply' failed! Failed to fetch

any clue on solving this ?
Many thanx

klaus.krpano · September 30, 2025 at 1:00 PM Official Post

Hi,

please post the full example.

The error message shows only a loading error of the splat file (was the blob url released/revoked in the meantime?).

Btw - instead of 'krpano.call("set(...)")' you can also directly do krpano.set("...").

Best regards,
Klaus

jeromebg · September 30, 2025 at 1:41 PM

here is the full action :

Code

	<action name="select_and_load_image" type="js"><![CDATA[
        var input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/jpeg,image/jpg';
        
        input.onchange = function(e) {
            var file = e.target.files[0];
            
            if (file && file.type.match('image/jpeg')) {
                var reader = new FileReader();
                
                reader.onload = function(event) {
                    var imageDataUrl = event.target.result;
                    
                    var targetkrpano1 = krpano.get("layer[krpano1].krpano");
                    var targetkrpano2 = krpano.get("layer[krpano2].krpano");
                    
                    if (targetkrpano1) {
					 	var currentSplatUrl = targetkrpano1.image.splats.url;
						targetkrpano1.image.reset("copy");
                        targetkrpano1.call("set(image.objectsize, 0)");
                        targetkrpano1.call("set(image.preview.type, SPHERE)");
                        targetkrpano1.call("set(image.preview.url, '" + imageDataUrl + "')");
						targetkrpano1.actions.loadpanoimage("KEEP3D|IMAGEONLY");
						targetkrpano1.view.reset();
                    }
                    
                    if (targetkrpano2) {
                        var currentSplatUrl = targetkrpano2.image.splats.url;
						targetkrpano2.image.reset("copy");
                        targetkrpano2.call("set(image.objectsize, 0)");
                        targetkrpano2.call("set(image.preview.type, SPHERE)");
                        targetkrpano2.call("set(image.preview.url, '" + imageDataUrl + "')");
						targetkrpano2.actions.loadpanoimage("KEEP3D|IMAGEONLY");
						targetkrpano2.view.reset();
                    }
                    
                    krpano.trace('Image chargée avec succès dans les deux layers');
                };
                
                reader.onerror = function() {
                    krpano.trace('Erreur lors de la lecture du fichier');
                };
                
                reader.readAsDataURL(file);
            } else {
                krpano.trace('Veuillez sélectionner un fichier JPG valide');
            }
            
            input.remove();
        };
        
        // Déclencher le sélecteur de fichiers
        input.click();
        ]]>
    </action>

Display More

klaus.krpano · September 30, 2025 at 2:39 PM Official Post

No revoke anywhere?

In the original examples, the dropped files are released when loading new panos:

Code

// remove the URL object when leaving the pano
krpano.events.addListener("onremovepano|once", function()
{
	URL.revokeObjectURL(fileURL);
});

jeromebg · September 30, 2025 at 2:49 PM

I use the original code (splatexamples_drop_in_support) to load the splat files.
The new action (select_and_load_image) is to be able to load a background sphere image after a splat is displayed.
OK it works if I remove URL.revokeObjectURL(fileURL);
But not sure it's the most clever way to make this work...

jeromebg · September 30, 2025 at 5:08 PM

here is the result, you can now add a background image : https://www.360images.fr/3dgs/splatcompare/

Participate now!