View Images from Database

#1

Is there a way/will there be a way to directly display an image that is retrieved from a database? Right now the only way to display an image is by storing it in the gateway and specifying its path in a component.

It would also be helpful to know how images will be stored when the future camera functionality is implemented.

0 Likes

Retrieve and Display a BLOB in Perspective
#2

You can load a blob from a database into a paintable canvas. I don’t have the code to hand but can post it later, do a search and I’m sure it will come up as that’s how I found it.

0 Likes

#3

Here’s an example from the forum. As craigb said, searching the forum can lead to lots of examples: Scale image in canvas

0 Likes

#4

If you’re asking for how to do this in Perspective:
Currently, you would probably have to do it using a webdev script, that could either return the image directly or a correctly formatted base64 string, which would then be able to be used by Perspective’s image component (I’m pretty sure). There are some ways that we could improve this experience, but the hard problem to deal with is the fact that the browser can’t directly access the database - so we need to deliver the images to it from the gateway in a format it can understand.

0 Likes

#5

You can create a named query that brings back the image bytes. If you are using MySQL, convert it to base64 in the query with TO_BASE64(ImageData).

Bind the source property of the perspective image component to the named query.

Do the following script transform:

b64Image = "data:imagef;base64,%s"%value
	
return b64Image

10 Likes

#6

Thanks @jpark this did the trick! I had to find a different way to convert to base64 as I’m using sql server but your reply had a lot of detail which really helped me figure it out

0 Likes

#8

Note that there is one heavy caveat to Jae’s method - significantly large images will dramatically slow down page loads, and can lead to issues in the designer, as well. Image components with true URLs will be automatically asynchronously loaded by modern web browsers, in a way that image;data encoded images cannot be. For some small images, it should be fine, but be aware of that if you’re building your entire project on it.

4 Likes

#9

Would you have an example of having the webdev script to to create an image data from the database and return an image.

I am fine with the SQL part of this. I have vision projects that are returning image data. I am new to the WebDev module and unsure how to return the data.

I assume it is a doGet request?

0 Likes

#10

The webdev script is just return {'bytes': <your byte array>}, where your byte array is populated via whatever mechanism you prefer to query the database (ie, system.db.runNamedQuery, system.db.runPrepQuery, etc).

0 Likes