Camera result with differing aspects

I have a square PictureBox and having trouble with differing aspect ratios when loading images from the Camera control, all with the same aspect ratio, square.

This one is a square image (circle on a transparent square obviously) 512 x 512

This one is also 512 x 512 but gets stretched for some reason. Can anyone shed light on why this happens?

From what i see,2nd image is also “square”,just that the distance from the camera to the pic is different.any thoughts,appstudio users?best rdgs,tst

If you take photo at certain angle,the pic will get streched.

Both images are files on my pc, both 512 x 512. Both created in photoshop, saved as png, same quality.

Oh,i am defeated,no ideas now.any comment to this thread,anyone?

I’m experimenting with setting picturebox.object-fit: contain; on the picturebox which is the target of a camera control. I don’t seem to be getting anywhere. Anyone got any ideas? It seems like objectFit should do something but doesn’t with my trials with images from camera control to picturebox.

As another option is there a way of capturing the image before the camera control puts it in the picturebox?

I think you are on the right track. I used this code to see it work, it does. But not sure how to incorporate this into AS.

<!DOCTYPE html>
img {
  width: 300px;
  height: 300px;
  object-fit: contain;
<h2>Using object-fit: contain</h2>
<img src="https://mydomain/veggiesP.jpg" alt="Veggies" width="400" height="300">

If you use the Camera control, it does not resize but you can get a small b64 file from it. However if you use the BS Input control (inpImage) with inputType=file, as follows, the image object (imgImage) is made proportional, but the b64 file is very large.

Function inpImage_onchange()
   Catch err
   End Try
End Function

Function reader_onload(e)
  Dim lines()
  lines = Split(, vbLF)
  b64Temp = lines(0)
  imgImage.src = b64Temp
End Function

It is possible to get both a small and proportional image but it is a bit complex and requires the user to make a selection on the same image twice. Not very practical. But if there were a way to have the Camera control return the width and height of the picture it could be done with one click.

Note: it looks like the object-fit: contain method will allow loading of images proportionally correct from your domain and not just locally as the camera and input methods do.


I used a camera control from How to access a webcam and take a picture with JavaScript | by Benson Ruan | The Startup | Medium

I got an image returning into a PictureBox that does format with the objectFit styling. The negative with all my work was no matter what objectFit value I use the picture is distorted to some degree from the original. Some worse than others. Following is screenshots taken on my phone. Top image is the camera view and bottom image is the resulting “snap”.

What are developers doing to save a respectable photo that represents what the user is expecting?