# Resize Image on Upload

**URL:** <https://forum.inductiveautomation.com/t/resize-image-on-upload/6652>\
**Category:** Ignition\
**Created:** [June 5, 2013, 9:35pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652 "2013-06-05T21:35:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![r\_beall](https://avatars.discourse-cdn.com/v4/letter/r/90ced4/32.png) [@r\_beall](https://forum.inductiveautomation.com/u/r_beall)\
**Post date:** [June 5, 2013, 9:35pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/1 "2013-06-05T21:35:29Z")

</div>

Does anyone know if there’s a way I can resize an image/blob before I upload it to my database?

Here’s what I’m doing right now to upload/

```auto

import fpmi
from java.net import URL
from javax.imageio import ImageIO		

#set the id
myID = event.source.parent.ComplaintId 	

if myID != None:
	#prompt user to select file		
	path = fpmi.file.openFile() 

	#if user selects a file, and does not click cancel, do this 
	if path != None:

		bytes = fpmi.file.readFileAsBytes(path) 
		#write the data to the database, and return the id of the new row 
		fpmi.db.runPrepStmt("INSERT INTO TBL_IMAGE (COMPLAINT_ID, IMAGEFILE) VALUES(?,?)", (myID,bytes))  	

```

I guess another question could also be; ‘Is there a way to scale an image with the printable canvas’? That might be easier since that’s where this will eventually be displayed.

---

<div class="post-metadata">

**Author:** ![Robert.McKenzie](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/robert.mckenzie/32/4134_2.png) [@Robert.McKenzie](https://forum.inductiveautomation.com/u/Robert.McKenzie)\
**Post date:** [July 12, 2013, 11:25pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/2 "2013-07-12T23:25:22Z")

</div>

You should be able to set your scale in the paintable canvas, it’s just using the Java 2d drawing in there. I think you can call scale() to change it just like in the sample code, but I haven’t tried with an image.`#### Scale graphics to actual component size
dX = (event.width-1)/100.0
dY = (event.height-1)/100.0
g.scale(dX,dY)`

---

<div class="post-metadata">

**Author:** ![jholloway](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jholloway](https://forum.inductiveautomation.com/u/jholloway)\
**Post date:** [October 27, 2020, 11:46am UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/3 "2020-10-27T11:46:59Z")

</div>

Has anyone had success resizing images prior to upload to a DB?

I am having issues getting it resized before upload.

```auto
	from javax.imageio import ImageIO
	from java.io import ByteArrayInputStream
	
	# Grab the file name and data
	#filename = event.file.name
	filedata = event.file.getBytes()
	bais = ImageIO.read(ByteArrayInputStream(filedata))
	scaledImage = bais.getScaledInstance(320,-1,0)
	AAA = ImageIO.read((scaledImage))
	#filedata = AAA.asBytes()
	filedata = AAA

	# Use a query to insert the file	
	#databaseConnection = "AlternateDatabase"
	query = "INSERT INTO [Pipes].[FJC].[Images_JLH] (JobCardID, Grind1) VALUES(9,CONVERT(varbinary(MAX), ?))"
	args = [filedata]
	system.db.runPrepUpdate(query, args)

```

---

<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:** [October 27, 2020, 12:24pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/4 "2020-10-27T12:24:09Z")

</div>

You have the read and scale out of order:

```auto
	bais = ImageIO.read(ByteArrayInputStream(filedata))
	scaledImage = bais.getScaledInstance(320,-1,0)
	AAA = ImageIO.read((scaledImage))

```

should be

```auto
	bais = ImageIO.read(ByteArrayInputStream(filedata))
	image = ImageIO.read(bais)
	scaledImage = image.getScaledInstance(320,-1,0)

```

and then you need to use [ImageIO.write()](https://docs.oracle.com/javase/8/docs/api/javax/imageio/ImageIO.html#write-java.awt.image.RenderedImage-java.lang.String-java.io.OutputStream-) to get bytes you can store. (Via [ByteArrayOutputStream](https://docs.oracle.com/javase/8/docs/api/java/io/ByteArrayOutputStream.html), typically.)

---

<div class="post-metadata">

**Author:** ![jholloway](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jholloway](https://forum.inductiveautomation.com/u/jholloway)\
**Post date:** [October 27, 2020, 6:26pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/5 "2020-10-27T18:26:25Z")

</div>

PTurmel, Thanks for your help! I think I am closer but still getting an error.

```auto
TypeError: write(): 1st arg can't be coerced to java.awt.image.RenderedImage

```

```auto
    filedata = event.file.getBytes()
	bais = ImageIO.read(ByteArrayInputStream(filedata))
	scaledImage = bais.getScaledInstance(320,-1,0)
	
	OS = ByteArrayOutputStream()
	ImageIO.write(scaledImage, "jpg", OS)
	filedata = OS.toByteArray()

```

---

<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:** [October 27, 2020, 7:05pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/6 "2020-10-27T19:05:40Z")

</div>

Hmm. BufferedImage is a subclass of Image that implements RenderedImage. .getScaledInstance() doesn’t. So it won’t be simple. You’ll have to use an AffineTransform with an AffineTransformOp. I use these in my streamer module but at at fixed scales, so I don’t have an example for you.

---

<div class="post-metadata">

**Author:** ![pedropalmeira68](https://avatars.discourse-cdn.com/v4/letter/p/f07891/32.png) [@pedropalmeira68](https://forum.inductiveautomation.com/u/pedropalmeira68)\
**Post date:** [February 18, 2021, 11:10am UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/7 "2021-02-18T11:10:58Z")

</div>

this worked for me  
[source](https://gist.github.com/werbth/4b1cf7567657cd64c71eb08099544f35)

```auto
BufferedImage = java.awt.image.BufferedImage
filedata = event.file.getBytes()

bais = ImageIO.read(ByteArrayInputStream(filedata))
scaledImage = bais.getScaledInstance(320,-1,0)

bufferedThumbnail = BufferedImage(scaledImage.getWidth(None),scaledImage.getHeight(None),BufferedImage.TYPE_INT_RGB)
bufferedThumbnail.getGraphics().drawImage(scaledImage, 0, 0, None)

OS = ByteArrayOutputStream()
ImageIO.write(bufferedThumbnail, "jpg", OS)
filedata = OS.toByteArray()
```

---

<div class="post-metadata">

**Author:** ![jholloway](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jholloway](https://forum.inductiveautomation.com/u/jholloway)\
**Post date:** [June 11, 2021, 5:55pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/8 "2021-06-11T17:55:16Z")

</div>

Are you using this within a perspective “onFileReceived” script? what librarys are you calling in? I get an error -` global name 'java' is not defined` on the first line of this code.

---

<div class="post-metadata">

**Author:** ![pedropalmeira68](https://avatars.discourse-cdn.com/v4/letter/p/f07891/32.png) [@pedropalmeira68](https://forum.inductiveautomation.com/u/pedropalmeira68)\
**Post date:** [June 14, 2021, 1:14pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/9 "2021-06-14T13:14:19Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc4ad637405a5099977643727a6166389f246a9a.png)  
Yes, my full code is:

```auto
import base64
import java.awt
from javax.imageio import ImageIO
from java.io import ByteArrayInputStream
from java.io import ByteArrayOutputStream
import java.awt.image.BufferedImage as BufferedImage 
	
id = system.db.runScalarQuery('SELECT MAX(id) FROM Avaliacao5S',"DB_IGNITION") + 1
area = str(self.getSibling("Area").props.text)
filename = str(self.getSibling("data").props.text)
filedata = event.file.getBytes()
	
image = ImageIO.read(ByteArrayInputStream(filedata))

filedata = image.getScaledInstance(600, 600, java.awt.Image.SCALE_SMOOTH)
	
bufferedThumbnail = BufferedImage(filedata.getWidth(None),filedata.getHeight(None),BufferedImage.TYPE_INT_RGB)
bufferedThumbnail.getGraphics().drawImage(filedata, 0, 0, None)

OS = ByteArrayOutputStream()
ImageIO.write(bufferedThumbnail, "jpg", OS)
filedata = OS.toByteArray()
	
	
query = "INSERT INTO Avaliacao5SImages (id, filename, Area, filedata) VALUES(?, ?, ?, CONVERT(varbinary(MAX), ?))"
args = [id, filename, area, filedata]
system.db.runPrepUpdate(query, args)

```

---

<div class="post-metadata">

**Author:** ![pedropalmeira68](https://avatars.discourse-cdn.com/v4/letter/p/f07891/32.png) [@pedropalmeira68](https://forum.inductiveautomation.com/u/pedropalmeira68)\
**Post date:** [June 14, 2021, 4:23pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/10 "2021-06-14T16:23:26Z")

</div>

For displaying you can use a Paintable Canvas or download from database and display

Download Script:

> x = system.db.runScalarQuery('select filedata from Avaliacao5SImages where id = 107',"DB\_IGNITION")  
> from [org.apache.commons.io](http://org.apache.commons.io) import IOUtils  
> from [java.io](http://java.io) import ByteArrayInputStream,FileOutputStream
> 
> path = 'C:\Users\Desktop\img.png'  
> fileout = FileOutputStream(path)  
> pdf = ByteArrayInputStream(x)  
> IOUtils.copy(pdf, fileout);
> 
> fileout.close();

Edit: IOUtils can be replaced by system.file.writefile

---

<div class="post-metadata">

**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\
**Post date:** [March 26, 2023, 8:04pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/11 "2023-03-26T20:04:39Z")

</div>

> [@pedropalmeira68](#):
>
> `ByteArrayInputStream`

Is there a way to use this by opening a file from a path first? Where it has:

> filedata = event.file.getBytes()

I'm trying to replace it with something to open the image from a path (mainly for testing from the script console) but doesn't get a recognizable format.

---

<div class="post-metadata">

**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\
**Post date:** [March 26, 2023, 8:31pm UTC](https://forum.inductiveautomation.com/t/resize-image-on-upload/6652/12 "2023-03-26T20:31:15Z")

</div>

Answered my own question, but in case anyone else want to know, just need to read the file in bytes in the beginning. I also included a bonus method to scale the size to a ratio instead of static (this keeps the picture in the same ratio).

```auto
imagePath = r"C:\Path\toImage"
bytes=system.file.readFileAsBytes(imagePath)
stream= ByteArrayInputStream(bytes)
image=ImageIO.read(stream)

#Scale to ratio
basewidth = 300
wpercent = (basewidth/float(image.width))
hsize = int((float(image.height)*float(wpercent)))
    
filedata = image.getScaledInstance(basewidth, hsize, java.awt.Image.SCALE_SMOOTH)
	
bufferedThumbnail = BufferedImage(filedata.getWidth(None), filedata.getHeight(None), BufferedImage.TYPE_INT_RGB)
bufferedThumbnail.getGraphics().drawImage(filedata, 0, 0, None)

OS = ByteArrayOutputStream()
ImageIO.write(bufferedThumbnail, "jpg", OS)
filedata = OS.toByteArray()
```