Set Canvas to Image Dimensions
(without using an extension)
INTRO
We often want to set an image to the canvas background, and have the canvas assume the dimensions (w x h) of the image. However, the canvas doesn't work like that! We need to be able to set the dimensions of the canvas to the dimensions of the image. This is possible through the use of one or more extensions out there, but here I can show you a way to do it by using a small piece of javascript in a webviewer. The canvas is also resized so that it fits into the screen. This will work with portrait, landscape and square images
HTML
In the html file below, we load the image from the webviewstring, get the image's height and width, then return these to the webviewstring, without having to actually display the image in the html page!
The html file MUST BE in the same folder as the image files for this to work (in my example, everything is in the assets). If your images are stored elsewhere on the device, then a copy of the html file will need to be made to the images directory - or the directory above the images directory (you will have to change the relative path in the webviewstring you send).
<!DOCTYPE html>
<html>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<head>
<title>GetImgAspect</title>
</head>
<body>
<script>
var img = new Image();
img.onload = function() {
window.AppInventor.setWebViewString((this.width/this.height).toFixed(2));
}
img.src = window.AppInventor.getWebViewString();
</script>
</body>
</html>
BLOCKS
for a single image. I have created the blocks without any variables or substitution for clarity (?)
On button click, we set the webviewstring to the image file (in this case the image is in the assets), and then we call the html file in the webviewer. The html file is also in the assets.
Once the javascript has done its thing and generated an aspect ratio value for the image (we do not actually need the image dimensions, just the aspect ratio), we then calculate the required canvas width by dividing the expected area of a square image by the webviewstring(aspect ratio). One can adjust the 0.5 value up or down for smaller or larger dimensions, but 0.5 works well, and fits landscape images well enough. We then calculate the canvas height by dividing the area by the width. Don't try to use the canvas width block to substitute in the canvas height calculation, it won't work - AI2 needs more time to figure out that the value of canvas width has changed, you would have to introduce a clock. See my second method for how this is done. Finally with the canvas width and height set, we can set the canvas background with the image, and the image will then be displayed at the correct aspect ratio and the canvas will fit on the screen.
The original landscape image used is 870x464 pixels in size, this has been reduced to 281 x 149 pixels, which is the size of the canvas. The method is to provide images of roughly the same area (width x height). Using 0.5 allows for an area of @ 42000 pixels, regardless of aspect ratio.
You should be able to see how to edit the javascript in the html file if you want to return the actual image width and height, just return "this.width" and "this.height".
2nd Example
Here I setup a small slideshow to show a square image, then portrait, then landscape using the above method, providing variables and substitution where possible. I have attached the aia project.
