# Scale image in canvas

**URL:** <https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104>\
**Category:** Ignition\
**Created:** [March 5, 2014, 2:53pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104 "2014-03-05T14:53:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AJBerera](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@AJBerera](https://forum.inductiveautomation.com/u/AJBerera)\
**Post date:** [March 5, 2014, 2:53pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104/1 "2014-03-05T14:53:02Z")

</div>

I like the concept of using the canvas to generate images stored in a database. How could we resize the image to fit inside the canvas?

I have this in my repaint script:

[code]from javax.imageio import ImageIO  
from [java.net](http://java.net) import URL

selectedID = event.source.parent.selectedID  
blobData = system.db.runQuery(“SELECT partPicture FROM PartsPicture WHERE partID = ‘%s’” % selectedID)  
g = event.graphics  
if len(blobData) \> 0:  
data = blobData[0][0]  
# open up a temp file  
# store the file name in a custom property on the paintable canvas  
# the paintable canvas repaint event will use this as input stream  
filename = system.file.getTempFile(“jpg”)  
system.file.writeFile(filename, data)  
urlFile = ‘file:%s’ % filename  
event.source.parent.getComponent(‘Paintable Canvas’).fileName = urlFile  
#Note: custom property on paintable canvas ‘fileName’ [string]

```
url = event.source.fileName
imageStream = URL(url)
image = ImageIO.read(imageStream)
#### Scale graphics to actual component size (doesn't do anything for me)
dX = (event.width-1) / 100.0
dY = (event.height-1) / 100.0
g.drawImage(image, 1, 1, event.source)
g.scale(dX,dY)[/code]
```

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [March 5, 2014, 3:17pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104/2 "2014-03-05T15:17:20Z")

</div>

You can scale the image in the call to drawImage. Here’s what is use (bytes is the blob read from the database, you don’t need a temp file):

```auto
	width = event.source.getWidth()
	height = event.source.getHeight()
   
	try:
		from javax.imageio import ImageIO
		from java.io import ByteArrayInputStream
		bais = ByteArrayInputStream(bytes)
		image = ImageIO.read(bais)
		bais.close()
		imgRatio = float(image.getWidth())/float(image.getHeight())
		if (imgRatio > 0):
			finalWidth = int(height * imgRatio)
			if (finalWidth > width):
				finalWidth=width;
			finalHeight = int(finalWidth / imgRatio)
			print imgRatio
		else:
			finalWidth = width
			finalHeight = height
			print 'No ratio'
		y = (height-finalHeight) / 2
		g.drawImage(image,1,y,finalWidth,finalHeight,event.source)
	except:
		g.drawString(u'Bild kann nicht angezeigt werden', 10, height/2)
```

---

<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:** [March 5, 2014, 3:48pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104/3 "2014-03-05T15:48:59Z")

</div>

The image variable in the code returns a BufferedImage which has an inherited method called [getScaledInstance](http://docs.oracle.com/javase/7/docs/api/java/awt/Image.html#getScaledInstance(int,%20int,%20int)). You can use this to scale the image. In this example, I scale the width of the image to 320 pixels and maintain the aspect ratio for the height (a 640x480 image will be scaled to a 320x240 image):

```auto
from javax.imageio import ImageIO
from java.net import URL
url = event.source.fileName
imageStream = URL(url)
image = ImageIO.read(imageStream)

####BEGIN SCALED IMAGE####
scaledImage = image.getScaledInstance(320,-1,0)
event.graphics.drawImage(scaledImage, 0, 0, event.source)
####END SCALED IMAGE####
```

---

<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:** [March 5, 2014, 4:05pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104/4 "2014-03-05T16:05:13Z")

</div>

From a deleted REPLY to this thread:

> [@BigSchottkyD](#):
>
> I'm only seeing the German.

Just comment out the "try, except" to see what the exact error is:

```auto
selectedID = event.source.parent.selectedID
blobData = system.db.runQuery("SELECT partPicture FROM PartsPicture WHERE partID = '%s'" % selectedID)
g = event.graphics
if len(blobData) > 0: 
      bytes = blobData[0][0]
      width = event.source.getWidth()
      height = event.source.getHeight()
      
      #try:
      from javax.imageio import ImageIO
      from java.io import ByteArrayInputStream
      bais = ByteArrayInputStream(bytes)
      image = ImageIO.read(bais)
      bais.close()
      imgRatio = float(image.getWidth())/float(image.getHeight())
      if (imgRatio > 0):
         finalWidth = int(height * imgRatio)
         if (finalWidth > width):
            finalWidth=width;
         finalHeight = int(finalWidth / imgRatio)
         print imgRatio
      else:
         finalWidth = width
         finalHeight = height
         print 'No ratio'
      y = (height-finalHeight) / 2
      g.drawImage(image,1,y,finalWidth,finalHeight,event.source)
      #except:
      #g.drawString(u'Bild kann nicht angezeigt werden', 10, height/2)

```

---

<div class="post-metadata">

**Author:** ![AJBerera](https://avatars.discourse-cdn.com/v4/letter/a/9fc29f/32.png) [@AJBerera](https://forum.inductiveautomation.com/u/AJBerera)\
**Post date:** [March 5, 2014, 4:32pm UTC](https://forum.inductiveautomation.com/t/scale-image-in-canvas/8104/5 "2014-03-05T16:32:50Z")

</div>

[quote=“adamaustin”]The image variable in the code returns a BufferedImage which has an inherited method called [getScaledInstance](http://docs.oracle.com/javase/7/docs/api/java/awt/Image.html#getScaledInstance(int,%20int,%20int)). You can use this to scale the image. In this example, I scale the width of the image to 320 pixels and maintain the aspect ratio for the height (a 640x480 image will be scaled to a 320x240 image):

[code]  
from javax.imageio import ImageIO  
from [java.net](http://java.net) import URL  
url = event.source.fileName  
imageStream = URL(url)  
image = ImageIO.read(imageStream)

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

Thanks, this works well for me!