Sizing images prior to displaying them in WebPage

[quote=134417:@Alex Monari]@ 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.
[/quote]

If you take a 1024x300 picture, it can be fit exactly to 512x300 since they are the same proportion. If you try to shove the same picture into a 512x150 WIV, either it has to be compressed vertically, or you got to display only part of the height of the picture.

What do you want to do ? From the example you posted, the water picture has to be the same proportions as the screen to display fine.

I just tried the webpicture, no luck. I am starting to believe a bug report is necessary.

I created an example to show a work-around for resizing an image, and also to show that the picture.graphics.drawpicture method has an error (NilObjectException).

There are three canvas’s in this example:

  1. top left - a picture that is not resized - working as expected
  2. top right - a picture that is resized - using resizing of graphics parameter in Paint
  3. bottom left - Comment first line of code in Canvas3 Paint Event and uncomment session.graphics.drawpicture code and it should work, but gives a NilObject exception error

WebResize.zip

Should this work or am I missing something?

I think on the very least you’ll need something like:

Session.pic = new Picture(ConvRPic.Width, ConvRPic.Height)

Otherwise Session.pic = nil. But when I ran your test, although session.pic now contained your pic, nothing was drawn on the canvas. Haven’t looked deeper into it though.

[quote=134545:@Eugene Dakin]I created an example to show a work-around for resizing an image, and also to show that the picture.graphics.drawpicture method has an error (NilObjectException).

There are three canvas’s in this example:

  1. top left - a picture that is not resized - working as expected
  2. top right - a picture that is resized - using resizing of graphics parameter in Paint
  3. bottom left - Comment first line of code in Canvas3 Paint Event and uncomment session.graphics.drawpicture code and it should work, but gives a NilObject exception error

WebResize.zip

Should this work or am I missing something?[/quote]

Thank you. It works indeed if you directly use the picture dragged into the project, but the issue here is that we were trying to use a method that sizes the picture prior to display it to reduce the bulk.

Here is the method, taken from Christian’s kindness :

[code]Function ProportinalScaled(pic as Picture, Width as integer, Height as Integer) As Picture
// Calculate scale factor

dim faktor as Double = min( Height / Pic.Height, Width / Pic.Width)

// Calculate new size
dim w as integer = Pic.Width * faktor
dim h as integer = Pic.Height * faktor

// create new picture
dim NewPic as new Picture(w,h,32)

// draw picture in the new size
NewPic.Graphics.DrawPicture Pic, 0, 0, w, h, 0, 0, Pic.Width, Pic.Height

// return result
Return NewPic
End Function
[/code]

It returns a valid picture, easily displayed in a WebImageView, but which is not displayed in the Paint event of a webCanvas.

I added that method to your sample project, duplicated Canvas3 and in Canvas4, slightly modified your Paint code so it uses ProportinalScaled. No picture :frowning:

Sub Paint(g as WebGraphics) Session.pic = ProportinalScaled(ConvRPic,me.width,me.height) // This is where I modified the code 'Comment out the above line of code and un-comment one of the two lines of code below... 'session.pic.Graphics.DrawPicture(ConvRPic, 0,0,200,200,0,0,200,200) 'NilObjectException 'session.pic.Graphics.DrawPicture(ConvRPic,0,0) 'NilObjectException Dim WP as new WebPicture 'Copy the picture into WebPicture WP = session.Pic 'Draw the image at a screen location - not resized g.DrawPicture(WP, 0, 0) 'Draw a black box around the canvas g.ForeColor = RGB(0,0,0) g.DrawRect(0,0,me.Width, me.Height) End Sub

Yes, I forgot to add this code. Thank you :slight_smile:

Thanks for modifying the example Michel and trying to help make this work :slight_smile:

Here is the modified example with Alain’s suggestion to prevent a NilObjectException error, and the example does not work as expected:
Picture Graphics DrawPicture Error Example

Here is the feedback report to help Xojo know about this issue: <https://xojo.com/issue/35753>

Thank you Eugene.

@ Eugene Dakin: Thanks for the reply. I ran your initial attempt (i.e. without the ProportinalScaled method) and it seems the manner in which you scale your 2nd canvas (canvas2) seems to size the image before display.

Just to see if i could view the complete image (both width and height wise) I created a larger canvas than your image locked it top, left and right and then set the g.Width and g.Height parameters with the exact width and height of the image in your case 777 by 423 for the image ConvRPic image.

Is this approach applicable to enable the sizing of the image before the display?

Next I will give your example which includes the ProportinalScaled method.

Hello Alex,

Yes, the Canvas2 resizing workaround will work for many situations.

Glad to see that it worked for you.

Another method is to use the WebHTMLViewer to display your picture.

Create an HTML string with the style information in it an load the page in. This resizes using the browser which doesn’t pixelate the picture and resizes automatically to the size of viewer.

E.g.:

Dim HTML As String
Dim Style As String

’ You can set these values to whatever you want to resize the image or use 100% to resize automatically at the browser
Style = “width:100%; height: 100%;opacity: 0.4;”

HTML = “

myViewer.LoadPage(HTML)

Hi Jim,

Thanks for the post. As this is my first time of loading a URL into a WebHTMLViewer and as basic as they may sound I wanted to clarify bits of the HTML string:

a) I guess data in the image source bit i.e. “’ src = 'data:image/png;base64,” means the project images are stored in a file called data. In my case in the meantime I’m not storing my files in a resources folder hence the source bit of my HTML string will be “’ src = 'imagetest9/png;base64,”. I’m I wrong or right regarding this

b) When I attempt running the program I get an error stating GetData does not exist? Having done some digging around on the forum I seem to come up short as to why this is happening. When I run the program without this bit the program runs but the image imagetest9 is NOT loaded up + EncodeBase64(Picture.GetData(Picture.FormatPNG) Any ideas?

Any response is much appreciated.