[SOLVED] How to Render an SQLite3 BLOB Field in a TImage?
lazarus / 16-Databases

----------------------------------------------------------------------
Aruna · 2025-04-04 02:18

Hello everyone,

The attached screenshot shows the last field, "Picture", as a BLOB in
the DBGrid. I'm trying to display this image in a TImage component,
but I'm unsure how to properly extract and render it.

What I'm Doing:
    The BLOB field contains image data stored in hex format.
    I believe I need to convert this hex data into a binary format
before loading it into TImage.

Example Table Structure:
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i CREATE
TABLE [Categories](      [CategoryID] INTEGER PRIMARY KEY
AUTOINCREMENT,       [CategoryName] VARCHAR(100),       [Description]
VARCHAR(100),       [Picture] BLOB); 
Example BLOB Data (Hex Format):
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i INSERT INTO
Categories VALUES(2,'Condiments','Sweet and savory sauces, relishes,
spreads, and seasonings',X'ffd8ffe000104a46494600010200006400640000ffe
c00114475636b79000100040000004c0[b]<snip>[/b]0c472a3c64768557ccffd900'
);
The BLOB field contains image data in hex format, shown below:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i X'ffd8ffe00
0104a46494600010200006400640000ffec00114475636b79000100040000004c0[b]<
SNIP>[/b]0c472a3c64768557ccffd900')
My Questions:
    How can I convert the hex BLOB data into a format that TImage can
display?
    Does anyone have a working example of loading an image from an
SQLite3 BLOB field into a TImage?
    Are there any special considerations for handling different image
formats (JPEG, PNG)?

I'm working on porting Northwind.db and later Chinook.db, so I'd love
to get this working properly.

Any help or sample code would be greatly appreciated!

----------------------------------------------------------------------
dsiders · 2025-04-04 02:39

Quote from: Aruna on April 04, 2025, 04:18:05 amHello everyone,

The attached screenshot shows the last field, "Picture", as a BLOB in
the DBGrid. I'm trying to display this image in a TImage component,
but I'm unsure how to properly extract and render it.

What I'm Doing:
    The BLOB field contains image data stored in hex format.
    I believe I need to convert this hex data into a binary format
before loading it into TImage.

Example Table Structure:
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i CREATE
TABLE [Categories](      [CategoryID] INTEGER PRIMARY KEY
AUTOINCREMENT,       [CategoryName] VARCHAR(100),       [Description]
VARCHAR(100),       [Picture] BLOB); 
Example BLOB Data (Hex Format):
Code: Text  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i INSERT INTO
Categories VALUES(2,'Condiments','Sweet and savory sauces, relishes,
spreads, and seasonings',X'ffd8ffe000104a46494600010200006400640000ffe
c00114475636b79000100040000004c0[b]<snip>[/b]0c472a3c64768557ccffd900'
);
The BLOB field contains image data in hex format, shown below:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i X'ffd8ffe00
0104a46494600010200006400640000ffec00114475636b79000100040000004c0[b]<
SNIP>[/b]0c472a3c64768557ccffd900')
My Questions:
    How can I convert the hex BLOB data into a format that TImage can
display?
    Does anyone have a working example of loading an image from an
SQLite3 BLOB field into a TImage?
    Are there any special considerations for handling different image
formats (JPEG, PNG)?

I'm working on porting Northwind.db and later Chinook.db, so I'd love
to get this working properly.

Any help or sample code would be greatly appreciated!

Most people would just use the TDBImage control. Otherwise, look at
the LoadPicture method implemented in dbctrls.pp / dbimage.inc.
That'll show you what you need to know.

----------------------------------------------------------------------
rca · 2025-04-04 03:52

I don't use hexadecimal formatting for images.

Having a form with:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses  DB;  
  Button1: TButton;    Image1: TImage;    SQLQuery1: TSQLQuery; 
I load images from the database like this:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.Button1Click(Sender: TObject);var  StreamImg: TStream;begin 
StreamImg := SQLQuery1.CreateBlobStream(SQLQuery1.FieldByName('FieldNa
meImg'),bmRead);  Image1.Picture.LoadFromStream(StreamImg); 
StreamImg.Free;end; 
I hope you can adapt this code to your project and it can help you.

----------------------------------------------------------------------
paweld · 2025-04-04 04:54

https://forum.lazarus.freepascal.org/index.php/topic,67168.msg516561.h
tml#msg516561

----------------------------------------------------------------------
Aruna · 2025-04-04 07:53

Quote from: dsiders on April 04, 2025, 04:39:00 amMost people would
just use the TDBImage control. Otherwise, look at the LoadPicture
method implemented in dbctrls.pp / dbimage.inc. That'll show you what
you need to know.
 @dsiders thank you I never thought of looking for a data-aware image
control. TDBImage works. Screenshot attached. Much appreciated. I will
go through  dbctrls.pp / dbimage.inc. Many thanks once again.

----------------------------------------------------------------------
Aruna · 2025-04-04 08:02

Quote from: rca on April 04, 2025, 05:52:04 amI don't use hexadecimal
formatting for images.

Having a form with:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses  DB;  
  Button1: TButton;    Image1: TImage;    SQLQuery1: TSQLQuery; 
I load images from the database like this:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.Button1Click(Sender: TObject);var  StreamImg: TStream;begin 
StreamImg := SQLQuery1.CreateBlobStream(SQLQuery1.FieldByName('FieldNa
meImg'),bmRead);  Image1.Picture.LoadFromStream(StreamImg); 
StreamImg.Free;end; 
I hope you can adapt this code to your project and it can help you.
Hi @rca, the database I am trying to port into Lazarus was originally
released by Microsoft as a sample database for Microsoft Access. So I
had nothing to do with the hex blob format. I have no option but to
find a way to work with it which I now can because @dsiders told me
what to do  Thank you for sharing your code it will come in useful.

----------------------------------------------------------------------
Aruna · 2025-04-04 08:03

Quote from: paweld on April 04, 2025, 06:54:41 amhttps://forum.lazarus
.freepascal.org/index.php/topic,67168.msg516561.html#msg516561
 Many thanks @paweld.