Load image from DB into Image object

I’ve successfully followed the examples on the forum to upload an image into an SQL database as a BLOB. I’ve also been able to create a custom property of type dataset on my window that successfully reads the BLOB into itself.

I’m stuck on the last step though, now that I’ve got this, how can I put an Image Display object on the screen and display the BLOB inside it?

The following code will display a BLOB as the ‘icon’ on a Label component:

from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File

image = # your readfileasbytes output
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
	newWidth = boundWidth
	newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
	newHeight = boundHeight
	newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))
3 Likes

Hmm… one step forward one step back. When I run the script I get an error message stating

TypeError: java.io.ByteArrayInputStrea(): 1st arg can't be coerced to byte[]

Here’s the code I’m using to store the image, the column type is medium blob (and I’ve set max_allowed_packet=16M to accommodate the max possible size of a medium blob.

path = system.file.openFile() if path != None: bytes = system.file.readFileAsBytes(path) system.db.runPrepUpdate("INSERT INTO assets (IMG, Num) VALUES (?,?)", [bytes, event.source.parent.Num])

Then to read it back:

from javax.swing import ImageIcon
from java.io import ByteArrayInputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL
from java.io import File

image = system.db.runQuery("SELECT IMG FROM assets where Num=%d" % (event.source.parent.Num))
bais = ByteArrayInputStream(image)
bImageFromConvert = ImageIO.read(bais)
lbl3 = event.source.parent.getComponent('lblImage3')
boundWidth = lbl3.width
boundHeight = lbl3.height
originalWidth = bImageFromConvert.width
originalHeight = bImageFromConvert.height
newWidth = originalWidth
newHeight = originalHeight
if originalWidth > boundWidth:
   newWidth = boundWidth
   newHeight = (newWidth * originalHeight) / originalWidth
if newHeight > boundHeight:
   newHeight = boundHeight
   newWidth = (newHeight * originalWidth) / originalHeight
scaledImage = bImageFromConvert.getScaledInstance(newWidth,newHeight,Image.SCALE_SMOOTH)
lbl3.setIcon(ImageIcon(scaledImage))

Try changing the line to:

image = system.db.runScalarPrepQUery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])

[quote=“jpark”]Try changing the line to:

image = system.db.runScalarPrepQuery("SELECT IMG FROM assets where Num=?",[event.source.parent.Num])

:prayer: I am not worthy! That did the trick! I’ll look at the help files too, but what’s the difference between those two queries?

Worked perfectly, thanks!

I know it has been a while but what is the best way to auto load this image with a popup?

The way I got it set up is that a popup loads that passes the image location over, the script works when i click on a button, but to auto load? Best I can think of is a propertyChange?

can you give a little more details about what you’re trying to accomplish? If you want to display the image you can look at my second post (and the followup that fixes a code error) to show how to display images stored to a database. If you want that image in a popup… one option would be to pass the “num” (a variable I was using as an index) into the popup and have the script execute when the window first is displayed.

Hello guys,
is this also working in perspective or is it only for vision. because i can’t quite figure out how to make it work in my perspective project. More generally, is it possible to make my perspective image component display a BLOB image?

Hello @JordanCClark,
thank you for your response. Yes that is what i am asking.
let say i use the file Upload component like on here: Download and Upload Files - Ignition User Manual 8.1 - Ignition Documentation
The onFileReceived event will provide me the bytes of the uploaded image. being there, how do i display that into the image component (instead of saving it into the Database for instance)?

@JordanCClark i was able to load the image into the image component after i formatted its bytes in to base64 strting. Thank you for the hint.