cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Convert base64 code to image

SOLVED
Regular Member

Convert base64 code to image

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!

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Convert base64 code to image

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

View solution in original post

20 REPLIES 20

Re: Convert base64 code to image

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.

Highlighted

Re: Convert base64 code to image

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.

 

Re: Convert base64 code to image

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.

Re: Convert base64 code to image

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

View solution in original post

Re: Convert base64 code to image

Thanks Constantine, this is exactly what i need.

Re: Convert base64 code to image

Sorry Constantine,
There are two types of photo data in my MySQL: "0x89504..." and "0xFFD9F..." and the code that you sent me only works with the first data. Please help me with this problem.

Thank you.

Re: Convert base64 code to image

Hmmmmm FFD9 doesn’t look like JPEG signature, which should be FFD8 instead. Could you attach a complete example, please?

Re: Convert base64 code to image

Sorry, it's my mistake. I did attach a complete sample, please check it.

Thank you.

Re: Convert base64 code to image

This file doesn't look like a valid JPEG image. It has correct JPEG header, but I guess it's incomplete, because:

  1. The HEX sequence has odd length, which obviously indicates truncation
  2. All JPEG files should contain two bytes FF D9, which indicate end of file. Those are not present in your example.
  3. When I convert it to binary file manually it won't open in any image viewer

So, I'd say you need to first make sure that you store and read those strings (blobs?) in/from MySQL correctly in the first place.

Announcements

Thingworx Navigate content has a new home! Click here to access the new Thingworx Navigate forum! ______________________________