base64 image source in loadscene?

  • Hello,

    My company is developing a time-lapse VR slideshow, and for the sake of user experience, I'd like to pre-fetch images before loading them into krpano.

    Is there any way to specify a data url (image encoded into base64 string) in krpano's loadscene API, or via similar API calls, such as setting some attribute?

    here's the current code that loads the image directly from our servers:

    Code
    var krThumbnailElement =  document.getElementById('#some-anchor');
    
    
            krThumbnailElement.set( "theimageurl", url );          krThumbnailElement.call("loadscene(imagepano, image.fisheye.align=" + krThumbnailElement.get("image.fisheye.align") + "&image.fisheye.url=%$theimageurl%, KEEPVIEW, BLEND(0.8, easeInExpo));");

    here's an example of what I'd like to change it to. However, this doesn't seem to work.

    Code
    var krThumbnailElement =  document.getElementById('#some-anchor');
    var thumbDate = new Date();        krThumbnailElement.call("loadscene(imagepano, image.fisheye.align=" + krThumbnailElement.get("image.fisheye.align") + ", KEEPVIEW, BLEND(0.8, easeInExpo));");
    
    
              $.get("http://our-server.com/some-api", { ID: ID,            name: name,            timeUTC: thumbDate.toISOString()          } )
    .done( function(response) {            console.log("trying to set kr thumbnail element to base64 pic.");
    krThumbnailElement.set("image.fisheye.url", response.bytes);          });


    response has two fields, the bytes field is the base64 encoded representation of the image. I've verified that the base64 string returned from the API works in normal <img src=""></img> tags.

    I've found some 3 year old posts about using data urls in krpano, and some recent threads stating that for some of the krpano functionality, this seems to work for PC/Android browsers.

    Is this possible for a VR loadscene? if so, what am I missing/doing wrong?


    thanks in advance,my apologies for the formatting of the code. I don't know how to massage the line endings/indentation to look proper.

  • I'm not sure how to load base64 encoded image urls, but if you want to pre-fetch it. why not create an invisible image and load it's source?

    Code
    $.get("http://our-server.com/some-api").done(function(data){
    var img = new Image();
    img.onload = function () {
       alert("image is loaded");
    }
    img.src = data.path
    }

    "

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!