Use Base64 string as source

[leicht-io]

Hi,

Is it possible to use a base64 string a source?

[mpetroff]

Yes. See this example. I didn't want to make the URL enormous, so the image is very low resolution.

[mpetroff]

I would not recommend specifying an image as a URL parameter (as I just did), at least with the current release, since the entire image is sent to the server. I just added support for using the fragment identifier, which isn't sent to the server, instead of the query string (# instead of ?), so it will at least be feasible to do with the next release, although I still wouldn't recommend it.

Using a base64 encoded image in a JSON configuration file or with the API should be fine with the current release.

[leicht-io]

@mpetroff when looking at your example i only see the following:

[mpetroff]

Apparently it works fine on Firefox but doesn't work with Chrome. Making it work on Chrome would require restructuring how images are loaded, which I don't really want to do, since I generally don't think using base64 encoded images is a good idea. Blob objects are better suited for passing around image data client-side.

[mostafaghanyomar]

I used a work around for this, to make it work on chrome, Hope it helps:

var base64DataPrefix = base64Image.substring(0, base64Image.indexOf(',')+1); /Getting the browser prefix for parsing the image in case it exists, in case not use the atob function directly on the retrieved data/ var binaryStringData = base64Image.substring(base64Image.indexOf(',')+1, base64Image.length); var binaryString = window.atob(binaryStringData); var binaryLen = binaryString.length; var fileContent = new Uint8Array(binaryLen); for (var i = 0; i < binaryLen; i++) { var ascii = binaryString.charCodeAt(i); fileContent[i] = ascii; } var blob = new Blob([fileContent], {type: 'application/octet-stream'}); var fileURL = window.URL.createObjectURL(blob); setTimeout(function() {//optional to add timeout before applying the change pannellum.viewer('panorama', { "type": "equirectangular", "target":"_blank", "panorama": fileURL, "title": 'hello image', "multiRes":{ "tileResolution": 512, "cubeResolution": 8432 } }); }, 250);

[elliotsabitov]

Hello, and thank you in advance for your time.

If I create a new image with JS and then set the image source, how would I set this image in pannellum? Otherwise, if I have a blob, then how do I set the image of pannellum to be a blob? I only see a way to set the panorama which has to be a string, which seems like the base64 is the only other option along with the URL. I see that you mentioned Blob objects in the two tickets concerning this, but I cannot find an example of getting this accomplished, and the documentation seems to only support a string.

I saw that the renderers init configuration allows you to pass an Image object, would this be the only way to get it done? Can you provide more information for getting this accomplished, or at least point me in the right direction please. Thank you.

[mpetroff]

You need to create a blob URL from the blob object, e.g. var url = URL.createObjectURL(blob);, where blob is the blob object. The returned URL will start with blob:. This URL can then be passed to Pannellum.