Visual LANSA Forum

Posted: **Wed Mar 24, 2021 2:07 pm**

Hi all,

I'd like to read byte array of JSON.
Then I'd like to show the image on Web page.

The API converts the image file to a byte array and sends it in JSON.
The JSON is as below.

Code: Select all

{
  "err":false,
  "state":100,
  "Messages":"Sucess",
  "detailMessages":"",
  "data":{
    "filename":"005",
    "filetype":"jpg",
     "fileobject":[255,216,255,224,0,16,74,70,73,70,0,1,1,1,0,72,0,72,0,0,255,219,0,67,0,8,5,6,7,6,5,8,7,6,7,9,8,8,9,11,19,12,11,10,10,11,23,17,18,14,19,28,24,29,29,27,24,27,26,30,34,44,37,30,32,41,33,26,27,38,52,38,41,45,47,49,49,49,29,37,54,57,53,48,57,44,48,49,47,255,219,0,67,1,8,9,9,11,10,11,22,12,12,22,47,31,27,31...........

I could get the array at fileobject and places it in an string.

#longstring += #Reader.ReadArrayWithPath( 'data/fileobject' ).AsArray.AsString.AsNativeString

But I don't know how to deal it after that to return to the image file.
Can anyone help me?

** special note **
It is related to the following question.

'Please tell me how to use ReadBase64.
Post by Take4 » Wed Dec 16, 2020 4:30 pm'

Take4 has passed away 2 months ago and I've take it over from him.
I confirmed API provider that the JSON data is not base64 but byte array of binary data.

Thanks in advance.
Regards, Yukiko Ikeo

Posted: **Wed Mar 24, 2021 2:29 pm**

I am so sorry to hear about the loss of Take4. I offer you my deepest condolences.

I'll check this in the morning.

Posted: **Fri Mar 26, 2021 12:38 am**

Hi Yukiko,

Seems that byte array is more of a Java thing, that could be affected by platform and the base64 is kind like the javascript way. In any case, I cant find the instruction in LANSA to handle that, but I can make it work creating a widget.

Basically, I created a new widget (File New Widget in VL), named it TestByteArrayToBlob, Widget Type CONTROL as this is going to show an image and in the definition tab of it, I added a method and three parameters. The widget reads the section in the json file (or url) that contains the array with byte array numbers.

Then the sample code proposed is copied to the implementation tab, and I added this code (if you know javascript you can improve it, this is mostly parts and pieces found in the web that I put together)

Here is the FULL code of the widget, you can copy paste this code and replace all in the implementation tab:

Code: Select all

//----------------------------------------------------------
// PROVIDE A SINGLE JAVASCRIPT FUNCTION TO DEFINE THE WIDGET
//----------------------------------------------------------

function( PROTOTYPE, WIDGET )
{
  //--------------------------------------------------------
  // WIDGET-INTERFACE FUNCTIONS (CALLED FROM THE VL-RUNTIME)
  //--------------------------------------------------------

  //
  // 'onCreateInstance' - gets called when LANSA creates an instance of the widget.
  //
  PROTOTYPE.onCreateInstance = function()
  {
    // Provide code to initialize the instance, FOR EXAMPLE
    this.Caption = '';
  }

  //
  // 'onRealizeControl' - gets called when LANSA creates a visual representation of the widget.
  //
  // Parameters:
  //
  // - parentDiv : the div that's been created as a container for this control.
  //
  PROTOTYPE.onRealizeControl = function( parentDiv )
  {
    // Provide the code to visualize the widget, FOR EXAMPLE...
    parentDiv.appendChild( document.createTextNode( this.Caption ) );
  }

  //
  // 'onSizeChanged - gets called when the widget changes size.
  //
  PROTOTYPE.onSizeChanged = function()
  {
     // The widget might need to redraw itself.
  }

  //-------------------------------
  // WIDGET-PROPERTY IMPLEMENTATION
  //-------------------------------

  //-----------------------------
  // WIDGET-METHOD IMPLEMENTATION
  //-----------------------------

  //
  // ConvertByteArrayToBlob - Converts a Byte Array in a JSON File to Blob
  //
  // Parameters:
  // - URLjsonFile: String
  // - keyjsonFile: String
  // - contentTypejsonFile: String
  //
  // Return Type: String
  //
  PROTOTYPE.ConvertByteArrayToBlob = function( strURLjsonFile, strkeyjsonFile, strcontentTypejsonFile )
  {
    // Implementation... 
    // first retrieve the text in the json that contains the array, 
    let myArray = [];
    // As with JSON, use the Fetch API  fetch('responsewithlargeimage2.json')
    fetch(strURLjsonFile)      .then(response => response.json())       .then(data => 
    {
     // Get the byte array data now in data.fileobject in an string of numbers separated by comma myArray 255,216,255,224,0,16,74,70,73,70,0,1,1,.... 
     myArray = data.data.fileobject;
	
     // Move the Byte Array MyArray to a blob.... 
     var byteData = '';
     myArray.forEach(function(item, index, array) { byteData = byteData.concat(String.fromCharCode(item)) }); 
	
     const b64toBlob = (byteData, contentType='', sliceSize=512) => {
     const byteCharacters = byteData;
     const byteArrays = [];

     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);

      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
     }

     const blob = new Blob(byteArrays, {type: contentType});
     return blob;
     }
    	
    // Lets use that string to create a blob file
    // const contentType = 'image/png';  or 'image/jpeg', etc.
    const contentType = strcontentTypejsonFile;
    const blob = b64toBlob(byteData, contentType);
    const blobUrl = URL.createObjectURL(blob);

    // And now lets show the image
    const img = document.createElement('img');
    img.src = blobUrl;
    document.body.appendChild(img);

    return blobUrl;
  });
  }
  // Done
  return WIDGET.Completed;
}

compile the widget. then, I created a web page to test this, and for this test, I put the json file in my webserver/images/temp folder /images/temp/responsewithlargeimage2.json , you can use your file instead:

note that in the web page code, i give the widget the name or url to find the json file, then the key where the array is containted and the content type for the blob:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Height(504) Width(920)

Define_Com Class(#TestByteArrayToBlob) Name(#TestByteArrayToBlob) Displayposition(1) Height(100) Left(32) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(24) Width(100)

Evtroutine Handling(#Com_owner.Initialize)
#TestByteArrayToBlob.ConvertByteArrayToBlob Urljsonfile('/images/temp/responsewithlargeimage2.json') Keyjsonfile('data/fileobject') Result(#std_blob) Contenttypejsonfile('image/jpeg')

Endroutine

End_Com

and then I got the result:

just in case, this is the json file I created for this test:

Code: Select all

{"err":false,"state":100,"Messages":"Sucess","detailMessages":"","data":{"filename":"scan00007","filetype":"PNG","fileobject":[255,216,255,224,0,16,74,70,73,70,0,1,1,0,0,1,0,1,0,0,255,226,2,160,73,67,67,95,80,82,79,70,73,76,69,0,1,1,0,0,2,144,108,99,109,115,4,48,0,0,109,110,116,114,82,71,66,32,88,89,90,32,7,227,0,9,0,12,0,20,0,33,0,37,97,99,115,112,65,80,80,76,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,246,214,0,1,0,0,0,0,211,45,108,99,109,115,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,11,100,101,115,99,0,0,1,8,0,0,0,56,99,112,114,116,0,0,1,64,0,0,0,78,119,116,112,116,0,0,1,144,0,0,0,20,99,104,97,100,0,0,1,164,0,0,0,44,114,88,89,90,0,0,1,208,0,0,0,20,98,88,89,90,0,0,1,228,0,0,0,20,103,88,89,90,0,0,1,248,0,0,0,20,114,84,82,67,0,0,2,12,0,0,0,32,103,84,82,67,0,0,2,44,0,0,0,32,98,84,82,67,0,0,2,76,0,0,0,32,99,104,114,109,0,0,2,108,0,0,0,36,109,108,117,99,0,0,0,0,0,0,0,1,0,0,0,12,101,110,85,83,0,0,0,28,0,0,0,28,0,115,0,82,0,71,0,66,0,32,0,98,0,117,0,105,0,108,0,116,0,45,0,105,0,110,0,0,109,108,117,99,0,0,0,0,0,0,0,1,0,0,0,12,101,110,85,83,0,0,0,50,0,0,0,28,0,78,0,111,0,32,0,99,0,111,0,112,0,121,0,114,0,105,0,103,0,104,0,116,0,44,0,32,0,117,0,115,0,101,0,32,0,102,0,114,0,101,0,101,0,108,0,121,0,0,0,0,88,89,90,32,0,0,0,0,0,0,246,214,0,1,0,0,0,0,211,45,115,102,51,50,0,0,0,0,0,1,12,74,0,0,5,227,255,255,243,42,0,0,7,155,0,0,253,135,255,255,251,162,255,255,253,163,0,0,3,216,0,0,192,148,88,89,90,32,0,0,0,0,0,0,111,148,0,0,56,238,0,0,3,144,88,89,90,32,0,0,0,0,0,0,36,157,0,0,15,131,0,0,182,190,88,89,90,32,0,0,0,0,0,0,98,165,0,0,183,144,0,0,24,222,112,97,114,97,0,0,0,0,0,3,0,0,0,2,102,102,0,0,242,167,0,0,13,89,0,0,19,208,0,0,10,91,112,97,114,97,0,0,0,0,0,3,0,0,0,2,102,102,0,0,242,167,0,0,13,89,0,0,19,208,0,0,10,91,112,97,114,97,0,0,0,0,0,3,0,0,0,2,102,102,0,0,242,167,0,0,13,89,0,0,19,208,0,0,10,91,99,104,114,109,0,0,0,0,0,3,0,0,0,0,163,215,0,0,84,123,0,0,76,205,0,0,153,154,0,0,38,102,0,0,15,92,255,219,0,67,0,5,3,4,4,4,3,5,4,4,4,5,5,5,6,7,12,8,7,7,7,7,15,11,11,9,12,17,15,18,18,17,15,17,17,19,22,28,23,19,20,26,21,17,17,24,33,24,26,29,29,31,31,31,19,23,34,36,34,30,36,28,30,31,30,255,219,0,67,1,5,5,5,7,6,7,14,8,8,14,30,20,17,20,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,255,194,0,17,8,0,173,0,173,3,1,34,0,2,17,1,3,17,1,255,196,0,27,0,1,1,0,2,3,1,0,0,0,0,0,0,0,0,0,0,0,6,4,5,1,3,7,2,255,196,0,26,1,1,0,3,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1,2,3,4,6,5,255,218,0,12,3,1,0,2,16,3,16,0,0,1,246,80,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,25,92,142,98,105,99,159,98,226,70,111,94,136,230,57,237,90,205,3,91,52,95,99,59,14,53,83,171,219,161,246,232,161,230,107,94,90,162,168,22,218,137,234,96,231,96,179,242,175,69,243,175,69,167,192,222,249,15,175,121,12,244,237,244,149,210,53,249,149,210,53,210,51,166,231,77,93,34,165,124,205,164,35,106,28,141,61,172,239,23,219,213,183,142,121,91,72,203,50,184,95,211,176,115,176,89,249,87,160,249,243,63,45,235,254,73,75,51,110,183,197,108,148,113,87,72,215,72,182,174,145,174,145,61,47,88,135,158,205,150,70,150,150,56,181,218,237,142,220,148,181,140,166,90,237,211,221,127,78,249,250,24,140,178,189,31,25,67,163,227,40,116,117,229,140,126,188,193,198,30,103,41,193,204,231,148,98,253,100,12,63,188,144,11,128,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,255,196,0,40,16,0,0,6,0,4,6,2,3,0,0,0,0,0,0,0,0,0,1,2,3,4,5,16,21,51,53,6,18,20,50,52,54,19,112,17,33,49,255,218,0,8,1,1,0,1,5,2,251,30,67,159,19,25,218,197,124,131,147,24,72,184,228,119,59,88,206,214,17,49,181,65,59,191,222,118,97,187,162,230,159,49,49,26,206,157,25,211,162,186,200,165,46,117,161,71,123,59,80,206,212,43,229,166,91,88,207,240,133,22,220,97,205,72,176,208,236,0,223,174,9,112,201,136,131,136,116,162,161,14,72,151,86,242,93,172,133,41,153,182,187,141,100,68,203,81,255,0,120,111,179,25,254,16,162,219,140,57,169,93,178,134,253,112,91,109,66,226,50,223,140,162,52,156,89,210,35,138,233,237,203,22,187,143,14,106,43,187,134,251,49,159,225,10,69,36,160,18,146,97,205,66,37,126,3,126,184,45,118,161,46,98,34,32,165,195,158,237,139,9,141,42,151,113,181,220,83,205,135,13,233,227,63,194,195,135,53,220,212,174,217,67,126,184,45,118,161,120,202,220,141,133,11,11,57,54,187,143,14,106,43,186,149,211,109,166,149,204,140,12,136,203,167,96,116,236,4,52,218,7,192,192,38,219,36,244,236,15,141,190,78,154,56,83,77,169,61,52,124,21,22,58,143,164,138,8,136,137,76,50,163,67,77,182,58,104,224,153,100,139,233,207,255,196,0,43,17,0,1,4,1,1,5,8,3,1,0,0,0,0,0,0,0,1,0,2,3,4,18,17,5,33,49,65,81,16,19,50,51,66,80,97,113,21,34,52,129,255,218,0,8,1,3,1,1,63,1,246,194,116,26,168,173,197,43,177,105,83,78,200,70,175,43,242,53,250,169,45,197,30,153,30,40,109,10,231,212,165,185,20,71,71,21,29,232,100,118,32,167,223,129,142,196,149,21,200,165,56,180,246,73,225,43,101,121,235,108,112,106,176,198,181,140,35,152,86,253,31,74,212,109,100,154,55,225,94,105,108,249,17,187,114,170,218,210,72,8,220,122,40,216,215,219,209,223,43,103,127,72,236,147,194,85,91,6,187,242,211,85,122,110,250,38,63,69,44,56,53,167,170,183,232,250,87,124,209,254,43,118,164,142,76,72,253,85,113,157,128,90,57,174,235,189,178,90,168,28,103,222,184,246,96,222,139,22,244,88,183,162,193,167,146,44,105,228,139,65,226,131,64,224,22,45,227,162,193,189,61,143,255,196,0,28,17,0,3,1,0,2,3,0,0,0,0,0,0,0,0,0,0,0,1,17,16,65,80,2,32,49,255,218,0,8,1,2,1,1,63,1,235,110,82,148,165,41,117,30,88,198,49,67,145,122,60,99,250,54,35,145,117,223,255,196,0,51,16,0,1,3,1,4,7,6,6,3,1,0,0,0,0,0,0,1,0,2,3,17,16,18,65,113,4,33,49,51,81,146,177,32,34,52,115,129,240,19,112,114,130,145,162,20,82,97,209,255,218,0,8,1,1,0,6,63,2,249,142,249,41,91,173,37,120,118,243,33,41,109,218,225,97,100,112,222,0,210,164,175,14,222,101,225,199,50,254,86,176,218,107,11,86,143,251,47,15,251,32,31,5,7,27,200,56,139,197,219,2,220,51,242,183,44,252,175,134,230,92,126,31,234,49,54,59,228,109,214,188,56,230,94,28,115,34,224,219,164,26,17,216,155,203,61,44,110,102,199,102,165,210,11,156,11,43,170,199,123,198,200,166,15,38,255,0,252,179,71,245,76,100,142,163,73,161,42,154,59,75,217,77,164,132,201,36,142,141,21,197,77,154,120,115,156,46,140,44,155,49,216,159,203,61,44,110,102,199,102,180,159,187,165,142,247,141,154,47,167,75,35,116,98,165,152,113,84,112,32,240,43,184,250,183,250,157,138,237,46,200,48,83,102,166,200,35,154,155,49,216,159,203,61,44,104,46,3,89,90,156,10,118,107,80,117,44,119,188,108,209,125,58,89,29,246,185,215,184,38,194,248,29,83,137,193,24,216,73,109,42,163,245,232,166,205,119,107,233,100,217,142,196,254,89,233,108,191,74,118,107,73,251,186,88,239,120,217,162,250,116,178,39,180,86,230,219,126,61,40,198,141,188,84,217,169,178,8,230,164,186,43,87,4,13,180,59,22,230,62,85,185,143,149,119,24,214,228,22,230,62,85,116,49,160,112,162,220,199,202,174,92,109,222,20,212,183,17,242,160,215,70,210,6,192,66,220,71,203,101,76,17,147,244,133,225,226,229,11,82,171,162,97,60,110,174,228,109,110,65,110,35,229,87,68,76,0,225,79,147,191,255,196,0,40,16,0,2,1,2,5,4,2,2,3,0,0,0,0,0,0,0,0,1,17,81,240,16,33,49,161,177,32,65,97,241,113,209,112,225,129,145,193,255,218,0,8,1,1,0,1,63,33,252,142,228,90,19,88,82,123,7,208,132,140,205,65,206,140,145,50,69,100,50,123,7,208,164,206,223,193,36,164,101,220,79,72,25,67,231,245,60,43,252,13,56,63,84,148,108,62,75,208,167,18,123,137,239,131,46,92,152,57,67,188,157,156,18,240,90,254,139,95,208,244,18,193,207,69,246,172,46,245,52,27,159,38,66,114,36,67,133,56,110,89,236,58,231,25,77,100,166,67,44,188,33,215,51,225,16,100,151,213,34,48,50,78,47,177,180,112,136,239,35,95,33,33,149,25,106,167,69,230,172,46,245,52,27,159,37,135,134,27,151,141,108,213,229,171,70,134,149,86,168,134,69,175,228,223,208,144,145,73,110,245,85,70,209,194,45,94,77,232,181,83,162,243,86,15,243,104,55,228,145,95,16,205,207,145,151,117,24,78,48,220,188,123,102,95,247,44,189,160,100,68,176,180,180,85,57,35,134,9,58,169,54,197,180,112,132,105,131,215,5,138,157,23,154,176,200,217,121,55,62,72,73,108,152,110,94,27,159,60,31,91,180,75,179,90,227,43,59,36,155,185,208,218,56,66,39,37,210,110,67,62,95,0,201,148,166,152,185,37,54,80,211,238,122,225,235,131,38,219,61,96,67,115,151,253,1,201,179,170,36,51,212,11,159,60,30,134,105,98,224,105,30,190,66,136,129,149,249,171,110,101,157,254,10,9,18,84,67,123,191,86,70,217,61,157,235,18,147,210,198,189,64,34,195,22,89,47,195,159,255,218,0,12,3,1,0,2,0,3,0,0,0,16,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,94,49,73,255,0,84,246,136,111,23,174,133,211,7,179,70,171,197,243,23,144,195,151,193,164,80,156,147,142,56,218,63,56,156,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,207,60,243,255,196,0,36,17,1,0,2,2,1,3,4,3,1,0,0,0,0,0,0,0,1,0,17,33,49,113,81,145,177,16,80,97,161,65,129,193,240,255,218,0,8,1,3,1,1,63,16,246,194,101,162,103,73,171,210,65,148,47,83,253,70,12,180,172,194,227,172,82,143,163,54,217,194,193,153,110,176,145,6,89,188,51,55,111,9,231,211,235,190,38,206,31,36,242,127,144,81,166,199,229,185,175,28,38,84,82,238,67,151,149,190,26,12,68,73,190,204,43,31,129,168,128,172,95,234,97,251,60,62,159,93,241,16,157,21,211,164,118,41,107,141,234,163,88,93,47,140,194,215,28,47,232,240,32,96,56,97,12,148,94,121,184,213,153,70,186,23,127,82,246,181,107,158,236,35,116,47,195,4,2,77,207,141,218,98,170,118,139,108,71,96,118,136,90,59,66,232,12,215,135,16,38,130,248,129,104,118,246,63,255,196,0,27,17,1,1,1,0,3,1,1,0,0,0,0,0,0,0,0,0,1,0,17,16,49,65,80,32,255,218,0,8,1,2,1,1,63,16,249,160,101,11,18,11,50,8,13,136,15,61,238,147,229,226,56,221,173,24,54,247,228,113,150,131,38,94,56,144,110,214,108,237,249,219,109,225,120,223,135,255,196,0,39,16,1,0,2,1,3,3,4,2,3,1,0,0,0,0,0,0,1,0,17,33,16,49,81,65,97,240,113,129,145,193,161,209,112,225,241,177,255,218,0,8,1,1,0,1,63,16,254,48,233,165,245,151,12,183,49,51,51,47,180,205,246,153,208,42,44,186,119,142,116,96,247,151,90,244,128,81,136,218,19,82,250,109,21,33,48,9,78,69,134,244,113,48,21,49,91,193,52,177,153,13,40,3,141,18,81,96,245,165,112,225,178,161,100,109,220,222,37,245,25,227,119,241,31,239,225,185,144,91,79,52,139,249,157,34,32,96,90,175,64,199,201,27,218,3,165,254,141,6,204,82,226,65,184,96,68,222,163,193,17,159,137,116,194,173,36,15,246,33,254,253,27,97,240,194,150,35,212,117,117,105,228,57,205,223,73,230,249,74,92,15,98,145,118,95,93,60,119,24,193,204,42,161,208,21,158,211,100,67,71,16,128,39,132,32,152,203,131,53,44,124,32,35,107,179,115,27,116,142,212,230,53,108,48,55,187,165,173,189,45,185,178,102,206,208,143,108,67,225,158,115,148,52,117,73,228,57,205,207,73,230,249,71,138,226,55,158,59,140,118,102,227,183,253,102,200,154,178,195,96,93,114,148,99,214,36,195,164,3,212,99,170,23,45,93,186,251,24,38,249,20,57,14,167,109,205,45,58,189,175,221,30,35,150,121,206,90,186,164,219,36,50,59,225,233,33,144,154,248,158,111,148,66,193,119,160,230,235,26,120,238,49,217,158,71,116,217,23,172,18,140,41,107,180,230,85,212,12,84,78,40,54,143,17,52,199,35,10,111,180,105,91,189,223,45,45,53,106,225,95,154,142,249,155,223,11,69,206,142,137,44,230,123,37,48,215,246,163,55,191,221,10,102,230,18,19,153,225,184,197,41,206,156,41,91,194,110,93,190,66,108,224,66,253,97,219,66,198,164,40,21,87,42,21,95,77,45,1,139,62,248,102,247,250,50,191,74,164,90,5,116,27,189,119,216,94,145,157,69,238,214,52,165,143,81,171,59,104,69,58,160,172,14,226,117,39,137,253,79,19,250,134,141,41,58,156,52,69,9,43,106,229,252,75,74,61,114,236,54,5,51,198,254,166,126,71,122,237,155,232,173,243,60,231,234,80,88,240,162,81,66,81,140,79,53,250,128,0,40,192,70,5,22,168,123,169,9,80,18,162,128,160,59,19,243,215,146,133,45,137,54,170,53,65,205,25,139,42,162,238,255,0,76,107,84,36,144,217,74,166,160,0,0,24,3,166,174,185,153,149,219,95,121,239,61,231,196,222,1,193,163,167,188,247,254,7,255,217]}}

good luck!

Posted: **Sat Mar 27, 2021 2:24 am**

Hi Dino,

Thank you for your reply and thank you for your condolence.

I created a new widget, new web page and put json file on IFS, then I could display the image from JSON data!
Thank you so much for your kind instructions.
I've tested using several kinds of extension of the file.
I've confirmed that 'jpg' and 'gif' was displayed but 'tif' wasn't.

#TestByteArrayToBlob.ConvertByteArrayToBlob Urljsonfile('/images/temp/responsewithimage4.json') Keyjsonfile('data/fileobject') Result(#std_blob) Contenttypejsonfile('image/tiff')

Anyway, it's greate help for me.
Thanks a lot

Posted: **Sat Mar 27, 2021 2:50 am**

Hi

Seems that TIFF format is not exactly the most liked format for the web. few browsers can show the image in the browser.

If you use this website: https://www.alternatiff.com/howtoembed.html you will be able to see that they are using a particular different way to show TIFF images. And even so, I don't see anything in Chrome in my Windows computer, but if go to my iPad, I can see the images when running Safari or even Chrome... so, it is very platform dependent.

If you really need to show TIFF images in the browser, maybe converting them from TIFF to JPG before doing so could be a good idea. Or if you are only interested in apple devices, you could change the approach to how we show the blob at the end of the widget:

Code: Select all

    // And now lets show the image
    const img = document.createElement('img');
    img.src = blobUrl;
    document.body.appendChild(img);

to something using embed or object.

Visual LANSA Forum

How to return JSON data to image file?

How to return JSON data to image file?

Re: How to return JSON data to image file?

Re: How to return JSON data to image file?

Re: How to return JSON data to image file?

Re: How to return JSON data to image file?