Is there a simple way (such as property/method) to scale image in WebImageView?

Targets Web
1

Now I use “ExecuteJavascript” method to set inner Img element’s style to scale it like this:

JS:

var img=RS.get("__id___image"); var div=RS.get("__id__"); if(img) { img.style.width="__w__px"; img.style.height="__h__px"; img.style.marginLeft="0px"; img.style.marginTop="0px"; img.style.left=0; img.style.top=0; } if(div) { div.style.width="__w__px"; div.style.height="__h__px"; div.style.marginLeft="0px"; div.style.marginTop="0px"; div.style.left=0; div.style.top=0; }

The ScaleImage method:

[code]Sub ScaleImage()
if me=nil then return

dim js as String=self.js_scaleImage

js=js.ReplaceAll(“id”,self.ImageView1.ControlID)
js=js.ReplaceAll(“w”,str(me.Width))
js=js.ReplaceAll(“h”,str(me.Height))

me.ExecuteJavaScript(js)
End Sub[/code]

But the result is not satisfied, Is there a better way ?

Thanks.

2

Assuming you want a proportional scale (keeps the aspect ratio the same), create a function like so:

[code]Function ProportionalScale(extends Pic as Picture, Width as integer, Height as Integer) As Picture
// Calculate scale factor
dim factor as Double = min( Height / Pic.Height, Width / Pic.Width )

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

// 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 scaled image
Return NewPic

End Function
[/code]
Then assign the returned picture to your WebImageView control. Something like:

MyImageView.Picture = MyImage.ProportionalScale( MyImageView.Width, MyImageView.Height )
3

How funny. I just added a training video last weekend that did this exact thing for WebImageView. http://xojo.bkeeney.com/XojoTraining/ Look for PictureShare.

The only thing I did differently was check to see if the picture was bigger than the ImageView bounds. If it was, I did the proportional scaling. If it was not, I didn’t do any scaling because I didn’t want the image enlarged.

4

Most of what I posted came from an example Christian posted a couple of years ago (forgot to attribute it to him in my earlier post).

5

No worries. Fairly simple code.

6

@Jay Madren Thanks for that simple example!

But if i downsize an image, it looks a little bit pixely. Is there a method to sharpen the picture?

7

[quote=143026:@Lars Lehmann]@Jay Madren Thanks for that simple example!

But if i downsize an image, it looks a little bit pixely. Is there a method to sharpen the picture?[/quote]

https://forum.xojo.com/9403-scale-quality-of-canvas-control

8

Hi @Michel Bujardet,

thanks for that link - but I’m trying it on Web/Linux.

The solution is with GDI+.

Is there another way?

9

[quote=143038:@Lars Lehmann]Hi @Michel Bujardet,

thanks for that link - but I’m trying it on Web/Linux.

The solution is with GDI+.

Is there another way?[/quote]

You can get and set picture.graphics.pixel without using RGBSurface, and I believe the function ScalePicture posted there can be used in Web Edition. Of course it requires a small adaptation.

10

Hmm, sure, I use the function above in my webproject.

but how can solve picture.graphics.pixel my problem?

11

The whole discussion thread is about alternate algorithm to Xojo scaling that provide better quality. Is it not what you wished for ? I tried the ScalePicture method, and found it to produce better results than the Xojo drawpicture method.

12

Okay, I did misunderstood you.

I was seeking for an alternative that already exists, not for a way I could try it by myself. If I would code it by myself, I would use JavaScript :wink:

So - I’ll do that :smiley: