I’ve been looking around regarding image sizes before importing them into the project editor for use in the canvas component which I picked as the component to use in order to set an image for a webpage background. I selected the canvas component over the picture, imagewell and webimageview components as from this forum post i understand it provides further flexibility.
I would like to know how to size images say (in photoshop or some other tool) so as to ensure the image covers the entire canvas component. To further understand my issue on this screenshot here
Essentially I’m having an issue with grasping which image size to select for my desired canvas size?
Here is what you do in Paint to size to the canvas size :
g.drawpicture(shuttle,0,0,me.width,me.height)
But with this code, that will in fact stretch the picture to the proportion of the canvas. For instance, a rectangular picture displayed like this in a square canvas will become square.
You got to measure the proportion of your original picture and use the same for your canvas, or calculate which final size it should have and at which offset it should display to take into account the difference.
@Michel Bujardet : Thanks for the reply. Please correct me if I’m wrong but essentially what you are implying is that by playing around with the last two arguments of the drawpicture method I can scale my image within my component. So say I have an image with standard dimensions such as 1024 by 600 if I were to set my canvas component to 512 by 300 this would lead to only half of the imported image being displayed? Apologies if my reasoning on this sounds trivial.
No. You may simply want to experiment with what I have posted. Me.Width and me.height are the dimensions of the canvas : 512 x 300 in your example, to which the picture will be scaled, so it will in fact display fine at the new size.
Keep in mind that the WebCanvas does not scale the image before it is sent to the browser(s). To save bandwidth, if your image is larger than the intended size, you should consider scaling it on the server or ahead of time using an image editing program.
Depends what you’re trying to do. If you want a static size, I’d just size it ahead of time. Otherwise your taking CPU time every time it gets requested.
@Michel Bujardet : I think moving forward and having set the desired dimensions for my canvas which are 780 by 390 I look at creating a 780 by 390 dummy image and experiment with this or images not too far from these dimensions. I’ll also look at experimenting with the me.width and me.height arguments with standard images sizes from 800 by 600 going up i.e. 1024 by 600, 1280 by 720, 1920 by 1080 etc. Hopefully I’ll be find the suitable image size for my desired canvas dimensions. I’ll look at
@ Greg O’Lone: At the moment I intend on having the image already edited but loaded up into the canvas either from images bundled with the web app (i.e. the images in project editor) or a URL whereby the image can be changed e.g. An Amazon S3 link. At the moment as I need to figure out my image size, I’ve not bothered with loading the image from a URL. I’ll move to this issue once I figure out my ideal image size.
@ Albin Kiland: Cheers for the link. I’ll give the function a go as it seems very handy indeed.
Sorry, your code was right. Something else is wrong here.
Imgtest8 (I used shuttlelaunch.png from the Xojo examples) displays fine if drawn in Paint, but seems the picture returned by the method is not “seen” by drawpicture.
The same picture returned by ProportinalScaled used in an ImageView works perfectly.
@ Michel Bujardet: Really appreciate your reply. Kindly correct me if I’m wrong but what you propose is essentially create an WebImageView and in an event handler say shown basically call the ProportinalScaled method as a Picture and then set this picture to the imageview.
Please see my code below:
Dim p As Picture = ProportinalScaled(imgtest7, me.width, me.height)// Automatically converts WebPicture to Picture
ImageViewMiddle.Picture = p // Automatically converts Picture to WebPicture
I guess to some extent I executed what I mention above correctly as it shows imgtest7 right in the middle of the WebImageView as opposed to filling the WebImageView which is what I’m targeting.
I’ll have closer look at the ProportinalScaled() method to see if i missed out on something.
[quote=134322:@Alex Monari]@ Michel Bujardet: Really appreciate your reply. Kindly correct me if I’m wrong but what you propose is essentially create an WebImageView and in an event handler say shown basically call the ProportinalScaled method as a Picture and then set this picture to the imageview.
Please see my code below:
Dim p As Picture = ProportinalScaled(imgtest7, me.width, me.height)// Automatically converts WebPicture to Picture
ImageViewMiddle.Picture = p // Automatically converts Picture to WebPicture
I guess to some extent I executed what I mention above correctly as it shows imgtest7 right in the middle of the WebImageView as opposed to filling the WebImageView which is what I’m targeting.
I’ll have closer look at the ProportinalScaled() method to see if i missed out on something.[/quote]
If it displays the picture, that is a step in the right direction. Now what do you mean by “completely fill” ? If your WIV has the same proportions as the picture, it will display the fit. If your WIV has another proportion, which one do you want to fill ? Width or height ? In such cases, this can be achieved, but some cropping will occur on the other dimension.
I tried using a windows property to keep it in scope, no luck : nothing displays.
[quote=134374:@Eugene Dakin]I have had a similar problem when attempting to display a picture in a WebCanvas. Usually converting from a Picture to a WebPicture works:
WebPicture [/quote]
Thank you Eugene. I had a look there, but did not see it was possible to convert without Drawpicture. I had not noted the last constructor.
@ Michel Bujardet : Essentially I would like the image to fill the width and height of the WIV. When you refer to proportions I’m I wrong in saying if my image were 1024 by 600 and say my WIV is exactly half of that i.e. 512 x 300 would I be able to fill my WIV with the image or do I need to scale my image in a phot editing program to 512 by 300 to then enable it fit perfectlty in the WIV? (Once again apologies if the question sounds trivial.
@ Greg O’Lone : The picture displays but right in the middle of the screen.
@ Eugene Dakin : I’ll attempt the conversion from a Picture to a Webpicture.
