# Display images stored in a DB on canvas

**URL:** <https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316>\
**Category:** Ignition\
**Created:** [April 15, 2014, 7:05pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316 "2014-04-15T19:05:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Manuel](https://forum.inductiveautomation.com/u/Manuel)\
**Post date:** [April 15, 2014, 7:05pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/1 "2014-04-15T19:05:48Z")

</div>

Hi guys,

I’m trying to display images on canvas. The images are storage in a DB (mysql) in blob format. I read this [post](http://www.inductiveautomation.com/forum/viewtopic.php?f=70&t=11926&p=43053&hilit=blob#p43053) and I did the same but I’m getting an error when the blob data coming from the DB is converted to stream and then used by image class. The part of the code throwing the error is this:

` bais = ByteArrayInputStream(bytes)
	      image = ImageIO.read(bais)`

and the error is:

` java.lang.ArrayIndexOutOfBoundsException: java.lang.ArrayIndexOutOfBoundsException: -1
              caused by ArrayIndexOutOfBoundsException: -1`

I have checked the info coming from the DB and it seems to be ok. The data type is array.

```auto
               <type 'array.array'>
```

On the other hand I tried using java.net.URL class to read an image on internet and then use it as Image input and that worked fine.

` img_url = URL("http://viewik.ru/wp-kantent/uploads/2013/01/foto-0001.jpg")
               image = ImageIO.read(img_url)`

I would really appreciate a solution for this, using ByteArrayInputStream or something different.

thanks

---

<div class="post-metadata">

**Author:** ![adamaustin](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@adamaustin](https://forum.inductiveautomation.com/u/adamaustin)\
**Post date:** [April 15, 2014, 8:05pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/2 "2014-04-15T20:05:30Z")

</div>

When possible, you should try to send as much code as you can. Also send the entire error message (or at least the line number where the error occurred). Your code looks fine.

---

<div class="post-metadata">

**Author:** ![Manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Manuel](https://forum.inductiveautomation.com/u/Manuel)\
**Post date:** [April 16, 2014, 7:27pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/3 "2014-04-16T19:27:17Z")

</div>

Here is all the code:

[code]from java.awt import Color  
from java.awt import GradientPaint  
from java.util import Date  
from java.text import SimpleDateFormat

# Obtain date

#df = SimpleDateFormat(‘yyyy-MM-dd HH:mm’)  
#fecha = event.source.parent.getComponent(“Group”).getComponent(“calendario”).date  
#fecha\_formateada = df.format(fecha)

# Var used to create the query

#id\_pozo = event.source.id\_pozo

# Hardcoded query for testing

query = “select imagen from Pozo\_Fotos where fecha\_captura like ‘2014-03-27 20:24%’”

# Run query on DB.

data = system.db.runQuery(query, “rkn”)

g = event.graphics

# Verify query result

if len(data) \>= 1:  
bytes = data[0][0]

```
from javax.imageio import ImageIO
from java.io import ByteArrayInputStream
from java.net import URL

# USING THIS THE IMAGE IS DEPLAYED
#img_url = URL("http://viewik.ru/wp-kantent/uploads/2013/01/foto-0001.jpg")
#image = ImageIO.read(img_url)

# USING THIS I GOT THE ERROR
#bais = ByteArrayInputStream(bytes)
#image = ImageIO.read(bais)
#bais.close()

####BEGIN SCALED IMAGE####
scaledImage = image.getScaledInstance(640,-1,0)
event.graphics.drawImage(scaledImage, 0, 0, event.source)
####END SCALED IMAGE####[/code]

```

And this is the error:

[code]Traceback (most recent call last):  
File “event:repaint”, line 36, in

java.lang.ArrayIndexOutOfBoundsException: java.lang.ArrayIndexOutOfBoundsException: -1

```
caused by ArrayIndexOutOfBoundsException: -1

```

Ignition v7.6.4 (b2013112117)  
Java: Oracle Corporation 1.7.0\_51[/code]

---

<div class="post-metadata">

**Author:** ![adamaustin](https://avatars.discourse-cdn.com/v4/letter/a/5f8ce5/32.png) [@adamaustin](https://forum.inductiveautomation.com/u/adamaustin)\
**Post date:** [April 16, 2014, 7:44pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/4 "2014-04-16T19:44:17Z")

</div>

See if bytes is None. Uncomment out your lines giving the error and paste the error message too.

---

<div class="post-metadata">

**Author:** ![Manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Manuel](https://forum.inductiveautomation.com/u/Manuel)\
**Post date:** [April 16, 2014, 8:37pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/5 "2014-04-16T20:37:45Z")

</div>

I expressed myself wrong, when I got the error the lines are uncomment.

` bais = ByteArrayInputStream(bytes)
   image = ImageIO.read(bais)
   bais.close()`

The error is:

[code]Traceback (most recent call last):  
File “event:repaint”, line 36, in

java.lang.ArrayIndexOutOfBoundsException: java.lang.ArrayIndexOutOfBoundsException: -1

caused by ArrayIndexOutOfBoundsException: -1

Ignition v7.6.4 (b2013112117)  
Java: Oracle Corporation 1.7.0\_51[/code]

On the other hand I checked the type of “bytes” and it’s an array

---

<div class="post-metadata">

**Author:** ![Manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@Manuel](https://forum.inductiveautomation.com/u/Manuel)\
**Post date:** [April 17, 2014, 7:32pm UTC](https://forum.inductiveautomation.com/t/display-images-stored-in-a-db-on-canvas/8316/6 "2014-04-17T19:32:43Z")

</div>

I found the problem, I was saving the images on the DB using " MySQLdb.escape\_string" and that was causing the problem. Now I’m saving the image in blob format whiout escape\_string on the DB and the image is displayed using the same code I posted.