transparent png to webpage

Thank Rossi, but still not working.

I created a portion of my application where It demonstrate how my xojo web app works.

link text

I am hoping that you can share your idea from this.

Hi Ronaldo,
you don’t tell us all of the story.
In your project there is a function used to scale the image.
Are you VERY sure that the problem isn’t created by the scaling function???

I just downloaded the scaling function somewhere from RB site and I tried to use it.
I cannot understand how he processes the picture but it scales the photo perfectly.

Perfectly???
Are you VERY sure???

I mean, perfectly it scales the photo. But I don’t have idea if it affects the transparency.

That is the only module I found on how to scale picture for the image well.

Sometimes - and wow this is going to sound crazy - you should read over the code you get from someone else.

  1. You will learn a new thing you didn’t previously know
  2. You will become aware of how the code functions
  3. You will be more comfortable making changes to the code for your purpose if you need to
  4. You don’t expose yourself to possibly malicious injections
  5. You don’t expose your users to possibly malicious injections

Thank Tim,

Sometimes, I depend on members feedback when taking free modules from the internet. I can read codes, but understanding every item of it is time consuming. I was almost collapsed when I tried to understand how jQuery codes work.

jQuery is a massive library written by many people. It is fair to assume that jQuery isn’t built to destroy your app. Things do happen, but jQuery is using an extreme example to try to discredit the idea of understanding the components you use.

It may be time consuming to read through the code you borrow, but you have been trying to solve this for 4 days now. I can assure you, that’s how you learn - you spend the time on it.

I found the problem in the resizing code: it doesn’t calculate for an alpha channel at all.
Next time, read the code you copy and paste and you’ll find the issue.

Thank you Tim,

Alpha channel? Its too advance for me. … the word itself left my consciousness now.
Maybe there a simple way to scale photo without removing the transparency of a picture. :slight_smile:

How about a simple

Public Function scalepicture1(p as Picture, newWidth as integer, newHeight as Integer) as picture Dim newpic As New Picture(newWidth, newHeight) Dim scale As Double = Min (newpic.Width/ p.Width, newpic.Height/p.Height) Dim g As Graphics = newpic.Graphics g.DrawPicture p, 0,0,p.Width * scale, p.Height * scale, 0,0,p.Width, p.Height Return newpic End Function
?

The code in the project (further up the thread) has measures for resampling as it scaled. It used RGB with no alpha parameter, effectively removing the transparency.

Yes, I’ve seen that. It’s a pity we don’t have a native InterpolationQuality property in Graphics, because that would handle the oddities. Both results don’t look too good to me on a Retina screen – why is there only a HiDPI-savvy constructor using folderitems and no graphics.ScaleXY in web projects?

Ok: With the old resizing method:
Change line 32 to pOut = New Picture( newWidth, newHeight ) (remove the “32”)
and lines 86-90:

o.Pixel(x, y) = RGB( _ (c1.Red + c2.Red + c3.Red + c4.Red) \\ 4, _ (c1.Green + c2.Green + c3.Green + c4.Green) \\ 4, _ (c1.Blue + c2.Blue + c3.Blue + c4.Blue) \\ 4, _ c1.Alpha + c2.Alpha + c3.Alpha + c4.Alpha \\4 )

EDIT: @ronaldo:
If you understand R, G or B channel, you understand alpha. It’s the transparency of a color with 0 = opaque and 255 = fully transparent.

I would like to share my ScalePicture function for those beginners like me that is looking for a way on how fit photo into webimage.

Here is the xojo code:


// based on code from Dr. Gerard Hammond

// with performance/functional improvements by Tomis Erwin

#If DebugBuild=False Then
  #Pragma BackgroundTasks False
  #Pragma BoundsChecking False
  #Pragma NilObjectChecking False
  #Pragma StackOverflowChecking False
#EndIf

Dim pIn,pOut As Picture
Dim s As RGBSurface
Dim o As RGBSurface
Dim x,y,xMax, yMax As Integer
Dim xx() As Double
Dim c1, c2, c3, c4, c5 As Color
Dim xMult,yMult, a,b, xSub,ySub, xAdd,yAdd As Double

If p=Nil Then
  Return p
  
End

s=p.RGBSurface
If s=Nil Then
  Return Nil
End



//pOut=   New Picture( newWidth, newHeight, 32 )
pOut = New Picture( newWidth, newHeight )

If pOut=Nil Then
  Return Nil
End

o=pOut.RGBSurface
If o=Nil Then
  Return Nil
End

xMax = pOut.Width - 1
yMax = pOut.Height - 1

yMult=p.Height/newHeight
xMult=p.Width/newWidth

a=newWidth/p.Width
If a>.5 Then
  xSub=.45
  xAdd=.5
Elseif a<.5 Then
  xSub=.75
  xAdd=2
Else
  xSub=0
  xAdd=1
End

a=newHeight/p.Height
If a>.5 Then
  ySub=.45
  yAdd=.5
Elseif a<.5 Then
  ySub=.75
  yAdd=2
Else
  ySub=0
  yAdd=1
End

Redim xx(xMax)
For x=0 To xMax
  xx(x)=(x * xMult)- xSub
Next

For y = 0 To yMax
  b = (y * yMult)- ySub
  For x = 0 To xMax
    a = xx(x)
    c1 = s.Pixel(a       , b  )
    c2 = s.Pixel(a + xAdd , b )
    c3 = s.Pixel(a       , b + yAdd)
    c4 = s.Pixel(a + xAdd , b + yAdd)
    
    o.Pixel(x, y) = RGB( _
    (c1.Red + c2.Red + c3.Red + c4.Red) \\ 4, _
    (c1.Green + c2.Green + c3.Green + c4.Green) \\ 4, _
    (c1.Blue + c2.Blue + c3.Blue + c4.Blue) \\ 4, _
    c1.Alpha + c2.Alpha + c3.Alpha + c4.Alpha \\4 )
    
  Next
Next


Return pOut

Thanks for the Mr.Rossi (who attended my concern), Tim (for the explanation), Mr.Bogun (he fix this code).

:slight_smile:

Hi Ronaldo,
just for information scaling a picture in Xojo is way simple and was reported many times in this forum with a function like this:

[code]Function ScaleImageProp(src As Picture, DestWidth As Integer, DestHeight As Integer) As Picture
// Returns a picture scaled mantaining proportions
// Calculate scale factor
dim factor as Double = min( DestHeight / src.Height, DestWidth / src.Width )

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

dim p as new Picture( w, h)

p.Graphics.DrawPicture(src, 0, 0, w, h, 0, 0, src.Width, src.Height)
Return p
End Function
[/code]

Please note that in Web world you don’t need to scale the image because the browser can scale the image for you.

resizing a web image without redrawing

Regards.

wow. That’s a short one!