Skip to main content
Q
Quannd1-Visitor
1-Visitor
July 18, 2019
Solved

Convert base64 code to image

  • July 18, 2019
  • 2 replies
  • 13383 views

Hi all,

image.pngIn the code above, I converted a data from MySQL into base64encodeString. Next, I want to convert this string into an image to display on Mashup.

Any help is appreciated.

Thanks!

Best answer by Constantine

Hello,

 

Please let me know if this is what you need:

 

var input = "0x89504E470D0A1A0A0000000D4948445200000020000000200802000000FC18EDA30000000173524\
74200AECE1CE90000000467414D410000B18F0BFC61050000000970485973000012740000127401DE661F78000000C\
949444154484BEDD3C10DC230104451D7E5825C4FAA713329C608C9875D67767656825BE64402FA0F92D0D69FF702E\
964608E6636E63E9D4E057CBFF5EBDE6F641381A35F1034E0D1D70509007D595000DBEF7DBF500501B0FD31CD9124E\
480EFBB63454881B3BFEEAB749532E0D1AF0A0900FA458103B01F9E86A340182A080CB099E352E802016C848E0A316\
06F6532268440A14F850828F5991000CAA3EEBE43286040E98B0204B4BE262040FBEDDFB927197F12007A9FFE17F70\
050E80B02BEC93FDC0B245BEB0314878ED55E0206490000000049454E44AE426082";

var binaryString = "";
for (var i = 2; i < input.length; i += 2) {
 binaryString += String.fromCharCode(
 parseInt(
 input.substr(i, 2), 
 16
 )
 );
}

var result = base64EncodeString(binaryString);

Note that:

  1. Make sure that the Service return type is IMAGE
  2. No need for MIME type declaration, besides 0x89504E470D0A1A0A is PNG file signature, not JPEG
  3. Concatenating strings is ugly, but works. Rhino doesn't support ArrayBuffers anyway.

 

/ Constantine

2 replies

R
Rajesh_Sayana5-Regular Member
5-Regular Member
July 18, 2019

Hi,

 

From the image you have attached, it appears that the data you are trying to convert to image is of type BLOB. Please confirm if you have the data type as Blob on your MySQL end. If so, you can directly convert it to image by creating a service that accepts input parameter as base type Blob and set the return type of the service to Image. Assign the input parameter of type Blob to the result of the service. The obtained result will be the converted image. Please let me know if that helps.

Q
Quannd1-VisitorAuthor
1-Visitor
July 19, 2019

Hi Rajesh,

The "input" is the data in my MySQL and could you explain more details about the service you said? Does Thingworx snippet have it?

Thanks.

 
R
Rajesh_Sayana5-Regular Member
5-Regular Member
July 19, 2019

Hi, Thank you for the reply. I understand that "input" is the data in MySQL. I am trying to understand the data type in which it is saved in MySQL. The scenario I have explained works if your input is of datatype Blob in MySQL. I first would like you to check the datatype of the input on your MySQL. If it is of type Blob, you can refer the attached service to convert it to Image. The output of the service should be image and the input should be Blob. That is all you have to do.

Kindly let me know if this helps or if you have a different datatype on MySQL.Service.png

 

Best regards,

Rajesh.

C
Constantine18-OpalAnswer
18-Opal
July 21, 2019

Hello,

 

Please let me know if this is what you need:

 

var input = "0x89504E470D0A1A0A0000000D4948445200000020000000200802000000FC18EDA30000000173524\
74200AECE1CE90000000467414D410000B18F0BFC61050000000970485973000012740000127401DE661F78000000C\
949444154484BEDD3C10DC230104451D7E5825C4FAA713329C608C9875D67767656825BE64402FA0F92D0D69FF702E\
964608E6636E63E9D4E057CBFF5EBDE6F641381A35F1034E0D1D70509007D595000DBEF7DBF500501B0FD31CD9124E\
480EFBB63454881B3BFEEAB749532E0D1AF0A0900FA458103B01F9E86A340182A080CB099E352E802016C848E0A316\
06F6532268440A14F850828F5991000CAA3EEBE43286040E98B0204B4BE262040FBEDDFB927197F12007A9FFE17F70\
050E80B02BEC93FDC0B245BEB0314878ED55E0206490000000049454E44AE426082";

var binaryString = "";
for (var i = 2; i < input.length; i += 2) {
 binaryString += String.fromCharCode(
 parseInt(
 input.substr(i, 2), 
 16
 )
 );
}

var result = base64EncodeString(binaryString);

Note that:

  1. Make sure that the Service return type is IMAGE
  2. No need for MIME type declaration, besides 0x89504E470D0A1A0A is PNG file signature, not JPEG
  3. Concatenating strings is ugly, but works. Rhino doesn't support ArrayBuffers anyway.

 

/ Constantine

    Q
    Quannd1-VisitorAuthor
    1-Visitor
    July 22, 2019

    Thanks Constantine, this is exactly what i need.

    Terms & ConditionsAccessibility statement