Convert image to dataURI

[RAJU MANGA]

Hi 
I want to get the dataURI for any image in "db_image" table, so I will use it(dataURI), wherever I want for restAPI purposes . Is there any way to achieve it. 

Regards
Raju Manga.

[Iraj Shaikh]

Hi @RAJU MANGA 

To get the data URI for an image stored in the `db_image` table, you can use a server-side script to fetch the image record, convert the image to a base64-encoded string, and then construct the data URI. Below is an example of how you might do this using a scripted REST API resource.

First, you'll need to create a new Scripted REST API if you haven't already:

1. Navigate to System Web Services > Scripted REST APIs in the navigation pane.
2. Click on "New" to create a new Scripted REST API.
3. Give your API a name, API ID, and description.
4. Click on "Submit" to create the API.

Next, create a new Scripted REST Resource:

1. Open the Scripted REST API you just created.
2. Under the "Resources" tab, click on "New" to create a new resource.
3. Define the HTTP method (GET, POST, etc.), the resource path, and any required roles.

Here's an example of a server-side script that you could use in the Scripted REST Resource to fetch the image and return its data URI:

(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response) {

    var imageSysId = request.queryParams.sys_id; // Pass the sys_id of the image as a query parameter
    if (!imageSysId) {
        return new sn_ws_err.BadRequestError("Parameter sys_id is missing");
    }

    var gr = new GlideRecord('db_image');
    if (gr.get(imageSysId)) {
        var imageType = gr.getValue('content_type'); // Get the MIME type of the image
        var imageData = gr.getValue('image'); // Get the image data as a base64-encoded string

        var dataURI = 'data:' + imageType + ';base64,' + imageData;

        return {
            "dataURI": dataURI
        };
    } else {
        return new sn_ws_err.NotFoundError("Image not found");
    }

})();

This script assumes that you're passing the `sys_id` of the image record as a query parameter to the REST API endpoint. It retrieves the image from the `db_image` table, constructs the data URI using the MIME type and base64-encoded image data, and returns it in the response.

Make sure to test your API thoroughly and handle any potential errors or edge cases. Also, be aware of the security implications of exposing image data via a REST API, and ensure that you have appropriate access controls in place.

Please mark this response as correct or helpful if it assisted you with your question.

[RAJU MANGA]

Hi @Iraj Shaikh 
I used the above code which you have provided for getting the image. and I am getting result as below for specific sysId.

{
  "result": {
    "dataURI": "data:png;base64,d775798643603110f86e6ec6c4b8f222"
  }
}

 And when I am trying to use dataURI in img element, it is not giving me any image

can you plz tell me how to get the image with that dataURI.

Regards
Raju Manga

[Iraj Shaikh · Accepted solution]

Hi @RAJU MANGA 

A data URI should include the actual base64-encoded data of the image, not just a string that looks like a sys_id or a hash. Here's how a correct data URI for an image should look:

{
  "result": {
    "dataURI": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
  }
}

The `data:image/png;base64,` part is correct and specifies the MIME type and encoding, but the part after `base64,` should be the actual base64-encoded binary data of the image.

To use the data URI in an HTML `img` element, you would do the following:

<img src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Image description" />

Make sure that the `src` attribute of the `img` tag contains the entire data URI string you received from the REST API.

If you're not seeing the image when you use the data URI in an `img` element, it's likely because the data URI is not correct. Double-check the server-side script that generates the data URI to ensure it's correctly fetching the image data and encoding it in base64 format.

Here's a revised version of the server-side script that should correctly fetch the image data and encode it as a base64 string:

(function process(/*RESTAPIRequest*/ request, /*RESTAPIResponse*/ response) {

    var imageSysId = request.queryParams.sys_id; // Pass the sys_id of the image as a query parameter
    if (!imageSysId) {
        return new sn_ws_err.BadRequestError("Parameter sys_id is missing");
    }

    var gr = new GlideRecord('db_image');
    if (gr.get(imageSysId)) {
        var imageType = gr.getValue('content_type'); // Get the MIME type of the image
        var imageBytes = gr.getValue('image'); // Get the image data as a GlideElementBinary
        var imageData = GlideStringUtil.base64Encode(imageBytes); // Encode the image data to base64

        var dataURI = 'data:' + imageType + ';base64,' + imageData;

        return {
            "dataURI": dataURI
        };
    } else {
        return new sn_ws_err.NotFoundError("Image not found");
    }

})();

Please note that the `GlideStringUtil.base64Encode` method is used to convert the binary data to a base64-encoded string. Make sure that the `image` field in the `db_image` table contains the binary data of the image, and that you're correctly encoding this data to base64.

After making these changes, test the REST API again and use the returned data URI in an `img` element to display the image.

Please mark this response as correct or helpful if it assisted you with your question.