Using JSON to store the image URLs instead of encoding them in base64

Question

Using JSON to store the image URLs instead of encoding them in base64

I am currently utilizing Three.js to store and retrieve objects in a database. The objects are being inserted as JSON format.

However, the issue I am facing is that when using JSON.stringify or toJSON(), it converts the image url (textures) into base64 format instead of retaining the http URL.

Here is the original JSON data:

{
    "metadata": {
        [...]
    },
    "geometries": [
        {
            [...]
        }],
    "materials": [
        {
            [...]
        }],
    "textures": [
        {
            [...]
        }],
    "images": [
        {
            "uuid": "4ED9CE3E-7C8A-4EB7-8CF8-D90B3527DF5F",
            "url": "data:image/png;base64,iVBORw0KGgoATyuRZGZVREd0FAERRRBAEBEFwAYEyKqP/Rfozx+5fDYjvpeT/akv+n/J+/7eMjX9Ke8uojP4JVAYAyuj/Ld3Por7fPQ9i8d7vvr8LKNzLg/dn1u1hvQf3q/v92vRX0X/ [...]"
        }],
    "object": {
        [...]
    }
}

The desired output for JSON would be:

{
    "metadata": {
        [...]
    },
    "geometries": [
        {
            [...]
        }],
    "materials": [
        {
            [...]
        }],
    "textures": [
        {
            [...]
        }],
    "images": [
        {
            "uuid": "4ED9CE3E-7C8A-4EB7-8CF8-D90B3527DF5F",
            "url": "http://www.domain.com/picture/path.png"
        }],
    "object": {
        [...]
    }
}

Is there a solution available to achieve this?

javascript json three.js base64

Answer 1

Answer №1

Dealing with a similar issue, I found a solution by redefining Source.toJSON() in the following way:

Source.prototype.toJSON = function ( customData ) {

    const isMainObject = ( customData === undefined || typeof customData === 'string' );

    if ( !isMainObject && customData.images[ this.uuid ] !== undefined ) {
        return customData.images[ this.uuid ];
    }

    const result = {
        uuid: this.uuid,
        url: this.data.src
    };

    if ( !isMainObject ) {
        customData.images[ this.uuid ] = result;
    }

    return result;
}

Another option is to save the relative image URL using this.data.getAttribute('src').

Answer 2

Dealing with a similar issue, I found a solution by redefining Source.toJSON() in the following way:

Source.prototype.toJSON = function ( customData ) {

    const isMainObject = ( customData === undefined || typeof customData === 'string' );

    if ( !isMainObject && customData.images[ this.uuid ] !== undefined ) {
        return customData.images[ this.uuid ];
    }

    const result = {
        uuid: this.uuid,
        url: this.data.src
    };

    if ( !isMainObject ) {
        customData.images[ this.uuid ] = result;
    }

    return result;
}

Another option is to save the relative image URL using this.data.getAttribute('src').

Answer 3

Answer №2

Upon analyzing the JSON file and obtaining the texture path, I executed the following steps:

let parsedObject = SELECTED.toJSON(); // convert selected object to JSON
base64Texture = parsedObject.images[0].url; // retrieve base64 encoded image value
parsedObject.images[0].url = texMap; // replace base64 encoded image with http texture path

parsedObject = JSON.stringify(parsedObject, null, '\t' );
parsedObject = parsedObject.replace(/[\n\t]+([\d\.e\-\[\]]+)/g, '$1'); // format the JSON for readability

And voila, the solution worked perfectly! :)

Answer 4

Upon analyzing the JSON file and obtaining the texture path, I executed the following steps:

let parsedObject = SELECTED.toJSON(); // convert selected object to JSON
base64Texture = parsedObject.images[0].url; // retrieve base64 encoded image value
parsedObject.images[0].url = texMap; // replace base64 encoded image with http texture path

parsedObject = JSON.stringify(parsedObject, null, '\t' );
parsedObject = parsedObject.replace(/[\n\t]+([\d\.e\-\[\]]+)/g, '$1'); // format the JSON for readability

And voila, the solution worked perfectly! :)

Using JSON to store the image URLs instead of encoding them in base64

Answer №1

Answer №2

Similar questions

What is the best way to show a tooltip alongside highlighted text?

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Automatically input the city once the zip code has been entered

Preserve present condition following a jQuery click event

What is the best way to store JSON data in Mongoose database?

Is there a way to store a complete array within a single cell?

Why do confirm or alert boxes in Safari on Windows require a double click?

Why isn't my output being shown on the screen?

Creating a jQuery countdown script

When displaying JSON data in a Xamarin Forms listview, the items may not appear in the desired order as specified in the

Mudblazor - Tap or click within the designated area to trigger the drag and drop functionality

Exploring the dynamic duo of Github and vue.js

Execute a function upon pressing the enter key

Calculate the length of a JSON array by using the value of one of its

Displaying adornments in a vertical arrangement within a TextField using Material UI

Utilizing jq for tallying

Guide on transferring a JSON to an ASP.NET API Controller from an Android Studio application

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

The JSON request has either timed out or produced an inconsistent result

Obtain picture from firebase utilizing react Js