# WebDev and Images

**URL:** <https://forum.inductiveautomation.com/t/webdev-and-images/29846>\
**Category:** Ignition\
**Created:** [November 11, 2019, 3:19pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846 "2019-11-11T15:19:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![djones](https://avatars.discourse-cdn.com/v4/letter/d/43a26b/32.png) [@djones](https://forum.inductiveautomation.com/u/djones)\
**Post date:** [November 11, 2019, 3:19pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/1 "2019-11-11T15:19:38Z")

</div>

i am implementing a webdev script to call images from the database and host them to perspective and to vision applications. All is working fine for image components that bind the URL.

However, now I need to get the byte array to put in a paintable canvas cached image and I need to access the image bytes through scripting.

The script below returns what appears to be a string and the system.net.httpGet documentation shows the return value as a string. How can I convert this to the correct byte array?

```auto
ID = 18
Server = system.tag.read("[System]Client/Network/GatewayAddress").value
Project = system.tag.read("[System]Client/System/ProjectName").value
url = Server + "/system/webdev/" + Project + "/EquipmentFiles?ID=" + str(ID)
print url
data = system.net.httpGet(url)
print data

```

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [November 11, 2019, 5:23pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/2 "2019-11-11T17:23:31Z")

</div>

Consider using system.util.sendRequest() to return the image bytes. If you have factored the meat of your image retrieval script into a project script module, it should be much simpler than decoding the server’s http(s) response.

---

<div class="post-metadata">

**Author:** ![djones](https://avatars.discourse-cdn.com/v4/letter/d/43a26b/32.png) [@djones](https://forum.inductiveautomation.com/u/djones)\
**Post date:** [November 11, 2019, 5:43pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/3 "2019-11-11T17:43:43Z")

</div>

The challenge is that the web dev module is already working very well for image components on both Perspective and Vision projects.

I’d prefer to not need to build a whole other method to return the byte array, when the web dev script is working

for reference here is the web dev script for the doGet

```auto
	params = request['params']
	ID = params['ID']
	data = system.db.runScalarPrepQuery("select fileData from spares_data where spares_data_id = ? ",[ID])
	
	
	return {'bytes': data}

```

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [November 11, 2019, 10:58pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/4 "2019-11-11T22:58:22Z")

</div>

Can you use

```auto
ImageIO.read(url)

```

---

<div class="post-metadata">

**Author:** ![djones](https://avatars.discourse-cdn.com/v4/letter/d/43a26b/32.png) [@djones](https://forum.inductiveautomation.com/u/djones)\
**Post date:** [November 12, 2019, 4:31am UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/5 "2019-11-12T04:31:54Z")

</div>

Hey everyone, thanks for the help!

Here is what I ended up with. To put the image into the “img-cached” property then I needed to write the result of ImageIO.read to a byteArrayOutputStream and then call .toByteArray()

```auto
from java.io import ByteArrayInputStream
from java.io import ByteArrayOutputStream
from javax.imageio import ImageIO
from java.awt import Image
from java.net import URL

Server = system.tag.read("[System]Client/Network/GatewayAddress").value
Project = system.tag.read("[System]Client/System/ProjectName").value
url = URL(Server + "/system/webdev/" + Project + "/EquipmentFiles?ID=" + str(ID))
print url
d = ImageIO.read(url)

bos = ByteArrayOutputStream()
ImageIO.write(d, "jpg", bos )
data = bos.toByteArray()

```

---

<div class="post-metadata">

**Author:** ![Ruchika](https://avatars.discourse-cdn.com/v4/letter/r/dbc845/32.png) [@Ruchika](https://forum.inductiveautomation.com/u/Ruchika)\
**Post date:** [August 18, 2023, 8:05am UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/6 "2023-08-18T08:05:29Z")

</div>

Hi, Can you please share how you are showing the image file from webdev into vision window?

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [August 18, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/webdev-and-images/29846/7 "2023-08-18T13:40:10Z")

</div>

It is very inefficient to use WebDev to deliver data to Vision. Vision can talk to the gateway directly, more efficiently, with `system.util.sendRequest()`.

For display, once you have the blob in the Vision client, use the techniques decribed in these topics:

[https://forum.inductiveautomation.com/search?q=imageio%20paintable%20canvas%20order%3Alatest](https://forum.inductiveautomation.com/search?q=imageio%20paintable%20canvas%20order%3Alatest)