transparent png to webpage

Targets Web
1

When I drag the transparent picture directly to the page and run, it works fine.

But when the transparent picture is a referenced from a field record, I got WHITE background.

How to make a picture from a field record became transparent too?

2

up

3

How do you save your picture in the database? How is your column defined?

4

after I uploaded it from upload control, I saved it as STRING.

5

Use BLOB for that. It should work how are you recreating the picture?

Using New Picture( 100, 100 )
Should give the alpha channel back

6

Thanks Derk.

I normally convert the photo to base64 string and save it to record/column. Then, I convert it back to photo before displaying it.
I am focused on XOJO WEB app only.

do I obligated to use blob instead of string just to preserve the transparency of the photo?

7

Hi Ronaldo,
are you sure that your conversion to/from base64 encoding is working as expected?
Loosing transparecy means that your conversion or your db are losing something.

Starts creating a very simple program that:

  1. read a picture from a file
  2. converts the picture to a base64 string
  3. converts the base64 string back to an image
  4. write the image to a new file.
    Compare the source with the converted image.

Post here your results with your code if your conversion does not works as expected.
These results are very helpful to diagnose the problem so we can help you more effectlively.

Regards.

8

yes. Here is my users step-by-step process:

  1. the user select png file.
  2. the xojo program convert the selected file to BASE64 string, then save to a column in the tables datbase.
  3. the xojo program uses IMAGEWELL to display the photo from the BASE64 string (converted to picture)

Upon display, transparency had gone.

9

Hi Ronaldo,
some misunderstandig.

We already know that you are:

  1. converting a picture to base64
  2. storing the image in a db
  3. reading the image base64 encoded from a db

What I try to ask you is to bypass the writing/reading the image from the db so we can check only the base64 encoding/decoding.
When this conversion works as expected we can then check the db as a possible source of fault.

Regards.

10

Hi Rossi,

I never tried yet to create physical png from base64 string.
I tried to look for sample here in the board but no found any.

11

So Ronaldo,
how are you create a phyisical png from a base64 string to display in a ImageWell?

12

I downloaded it from google, and drag it to my xojo page.

13

So, you don’t have a db and you don’t do any conversion to/from base64.

14

To clarify my xojo web app.

I usually download photo from google, and drag it to my XOJO IDE, then place it to Imagewell. Then display it to webpage.

later on, I learned that any photo can be saved to string column in db by converting it to base64.
I done that.

When I convert back the string base64 to picture to display, IT DISPLAY WORKS but the transparency is gone.

That’s is my problem.

15

I think I’m missing something.

Images in jpg format doesn’t have any transparency, only png have a transparency information.
Are we sure you aren’t pretending a transparency information from an image that was downloaded in jpg format?

16

You asked this question October 25 Transparency was lost for PNG
If the problem is the same, please don’t start a new thread.

17

Im using PNG not jpg.

I recreated my issue because nobody responded my concern for almost 1 month. Maybe I missed getting attention from everybody. That’s why I rephrased my SUBJECT.

18

Hi Ronaldo,
the following code:

dim destpicture As Picture = Picture.FromData(DecodeBase64(EncodeBase64(sourcepicture.GetData(Picture.FormatPNG, 100))))

produces in destpicture a png image with the same transparencies contained in sourcepicture.

Are you sure you aren’t making some confusions with strings or db?

If you want store images in a db, as Derk suggested, use BLOB instead of string: you can store images directly in the db without any conversion.

Regards.

19

Thank you, Mr. Rossi,

Here’s how I saved the user uploaded photo >>

sPix = EncodeBase64(p.GetData(Picture.FormatPNG,100))

And here is how I assigned it to imagewell

p=picture.FromData(DecodeBase64(sPix)) p.Graphics.Transparency= 100.0 wp = New WebPicture(p, Picture.FormatPNG) me.appLogo = wp

Maybe I missed something there, I’m hoping that you can shed light to me.

20

Remove the second instruction where you are setting the transparency?