473,799 Members | 3,121 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to create an 128x128 transparent image

pek
Here is what I want:
I have an image, let's say a JPEG 800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..

Can you help me/point me to the right direction..?

Thank you very much in advance..
Aug 6 '08 #1
9 4459
On Aug 6, 9:10*am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG *800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..

Can you help me/point me to the right direction..?

Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.

Then again, that may not be what you're trying to do. I guess the way,
then, would be to use imagecreatetrue color() to make a 128x128 pixels
image. Then, use imagecoloralloc atealpha() and imagefill() to make the
whole image transparent. Finally, use imagecreatefrom jpeg() to load
the JPG file and imagecopyresamp led() to scale the JPG image correctly
into your new image. Then, use imagepng() to save or stream the PNG
file. I haven't tried this, though.

-egbert
Aug 6 '08 #2
pek
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG 800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..

My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.
Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:
http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.
Then again, that may not be what you're trying to do. I guess the way,
then, would be to use imagecreatetrue color() to make a 128x128 pixels
image. Then, use imagecoloralloc atealpha() and imagefill() to make the
whole image transparent. Finally, use imagecreatefrom jpeg() to load
the JPG file and imagecopyresamp led() to scale the JPG image correctly
into your new image. Then, use imagepng() to save or stream the PNG
file. I haven't tried this, though.

-egbert
Thank you..
Aug 6 '08 #3
On Aug 6, 11:32*am, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:


On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG *800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.

Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.
I'm not sure, but my initial reaction is that your A tag is inline and
wraps the div that contains the image. if you'd make the A block-level
and with a fixed width, centering the image with margin: auto; should
do it. you could then maybe even drop the DIV (the A will be the
containing element).

the other option (that all the css geeks would disapprove of) is using
absolute positioning and computing the left, top indices (relative to
the table cell position, for instance) in PHP by reading the width/
height of the picture and doing some math.
Aug 6 '08 #4
pek
On Aug 6, 12:53*pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 11:32*am, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG *800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.
Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.

I'm not sure, but my initial reaction is that your A tag is inline and
wraps the div that contains the image. if you'd make the A block-level
and with a fixed width, centering the image with margin: auto; should
do it. you could then maybe even drop the DIV (the A will be the
containing element).

the other option (that all the css geeks would disapprove of) is using
absolute positioning and computing the left, top indices (relative to
the table cell position, for instance) in PHP by reading the width/
height of the picture and doing some math.
Bingo..!!! Yes, that was it..! I removed the div and made the a tag
block.. and it worked! thank you very much!!! :D
Aug 6 '08 #5
pek
On Aug 6, 12:53 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 11:32 am, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG 800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.
Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.

I'm not sure, but my initial reaction is that your A tag is inline and
wraps the div that contains the image. if you'd make the A block-level
and with a fixed width, centering the image with margin: auto; should
do it. you could then maybe even drop the DIV (the A will be the
containing element).

the other option (that all the css geeks would disapprove of) is using
absolute positioning and computing the left, top indices (relative to
the table cell position, for instance) in PHP by reading the width/
height of the picture and doing some math.
But I do have one more question, I want to make sure that my image
will not exceed (under any circumstance) the size 128x128.. Even if
the width is 100 times bigger than the height, I rather make it a
really small thumbnail.. Any suggestions? I only know how to resize
either the width or the height at 128..
Aug 6 '08 #6
On Aug 6, 1:38*pm, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:53 pm, Egbert Teeselink <skreb...@gmail .comwrote:


On Aug 6, 11:32 am, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG *800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.
Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.
I'm not sure, but my initial reaction is that your A tag is inline and
wraps the div that contains the image. if you'd make the A block-level
and with a fixed width, centering the image with margin: auto; should
do it. you could then maybe even drop the DIV (the A will be the
containing element).
the other option (that all the css geeks would disapprove of) is using
absolute positioning and computing the left, top indices (relative to
the table cell position, for instance) in PHP by reading the width/
height of the picture and doing some math.

But I do have one more question, I want to make sure that my image
will not exceed (under any circumstance) the size 128x128.. Even if
the width is 100 times bigger than the height, I rather make it a
really small thumbnail.. Any suggestions? I only know how to resize
either the width or the height at 128..
Didn't you ask that question some weeks ago already? I believe people
replied and posted some code too.. Search groups.google.c om if you
missed the answer.

The key to the trick is finding out whether the image is higher than
it is wide, or the opposite. In the first case, you compute the
resizing factor by 128/height, otherwise by 128/width. Resample with
that factor, and you're done.

Egbert
Aug 6 '08 #7
pek
On Aug 6, 2:55*pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 1:38*pm, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:53 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 11:32 am, pek <kimwl...@gmail .comwrote:
On Aug 6, 12:06 pm, Egbert Teeselink <skreb...@gmail .comwrote:
On Aug 6, 9:10 am, pek <kimwl...@gmail .comwrote:
Here is what I want:
I have an image, let's say a JPEG *800x600...
I want to create a transparent 128x128 PNG image and then resize the
800x600 to fit in the center of my transparent 128x128 PNG..
Can you help me/point me to the right direction..?
Thank you very much in advance..
My first reply would be "Don't" - it seems like you'd always end up
with either transparent bars on top and bottom, or on left and right,
no? I assume this is related to some sort of photo thumbnailing, and
in that case I think it would be better to resize the JPEG and use CSS
to add padding to the image (or wrap it in a DIV) so that it is always
outlined as if it is a 128x128 square. The advantage is that you still
have JPG compression, which is much better than PNG for things like
photos. As such, the page will load a lot faster.
Yes, that is exactly what I want to do and I also tried to correct it
with divs but where unsuccessfull. I totally agree that I should NOT
do that. Here is the link to the temporary site:http://treazy.com/pek/products
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.
I'm not sure, but my initial reaction is that your A tag is inline and
wraps the div that contains the image. if you'd make the A block-level
and with a fixed width, centering the image with margin: auto; should
do it. you could then maybe even drop the DIV (the A will be the
containing element).
the other option (that all the css geeks would disapprove of) is using
absolute positioning and computing the left, top indices (relative to
the table cell position, for instance) in PHP by reading the width/
height of the picture and doing some math.
But I do have one more question, I want to make sure that my image
will not exceed (under any circumstance) the size 128x128.. Even if
the width is 100 times bigger than the height, I rather make it a
really small thumbnail.. Any suggestions? I only know how to resize
either the width or the height at 128..

Didn't you ask that question some weeks ago already? I believe people
replied and posted some code too.. Search groups.google.c om if you
missed the answer.

The key to the trick is finding out whether the image is higher than
it is wide, or the opposite. In the first case, you compute the
resizing factor by 128/height, otherwise by 128/width. Resample with
that factor, and you're done.

Egbert
Oh yes, I'm really sorry.. Indeed I asked and they answered me
correctly.. I completly forgot.. Thank you and sorry for the trouble..
Aug 6 '08 #8
Message-ID:
<09************ *************** *******@m44g200 0hsc.googlegrou ps.comfrom
pek contained the following:
>The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.
www.slipperyhill.co.uk/gallery

--
Geoff Berrow 011000100110110 0010000000110
001101101011011 001000110111101 100111001011
100110001101101 111001011100111 010101101011
http://slipperyhill.co.uk
Aug 6 '08 #9
pek
On Aug 7, 12:34*am, Geoff Berrow <blthe...@ckdog .co.ukwrote:
Message-ID:
<09601001-b52a-4d8a-94ba-21fa633c7...@m4 4g2000hsc.googl egroups.comfrom
pek contained the following:
The three thumbnails in the center are out of my control. I tried
various tricks unsuccessfully and then thought that this bad practice
would at least solve my problem. If you can help correct this in CSS,
I'm totally with you! Otherwise I will follow your suggestions in the
next paragraph.

www.slipperyhill.co.uk/gallery

--
Geoff Berrow *01100010011011 00010000000110
001101101011011 001000110111101 100111001011
100110001101101 111001011100111 010101101011htt p://slipperyhill.co .uk
Very nice.. And very useful.. Thank you.. ;)
Aug 7 '08 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
2628
by: eruess | last post by:
Here's the scenario: I've got a whole bunch (for the sake of argument, let's say thousands) of different little 32x14 .png files that act as buttons all over a very large website. Each button image has 4 transparent pixels; the upper left, upper right, lower left & lower right. This is to help give the otherwise square button graphic a slightly rounded look to it.
5
2545
by: Tony Clark | last post by:
Hi, I have a bmp that is set in a panel, i want to make the white color in the bmp image transparent so i can see the color of the panel below. How is this done? thanks tony
0
3538
by: juglesh | last post by:
Hello, I've searched and d/l'd but cant seem to find a way of creating a semi-transparent drop shadow for an image. Let me say, be fore I go on, I *do not* want one of those scripts that resizes your image a bit to the left and bottom, and then grafts a shadow onto it. I want to use a full shadow (it would be about as big as the image) and shift it a bit with CSS. So, I will have the image sitting in a DIV which will have the shadow as...
2
2719
by: Trond Michelsen | last post by:
Hi. I have a transparent PNG-image that I would like to display on top of the rest of the web page. I've already got this part working. But, I'd like the background (as in "the part of the image that is transparent"), to be semi transparent instead. So, I've wrapped the image in a div-tag with the style "opacity: .70" instead. This gives me pretty much the semi transparency that I'm looking for, except that this makes the entire image...
9
5875
by: Chuck Anderson | last post by:
Is it possible to overlay a transparent watermark on an image - dynamically? I'd like the result to look like this example: <http://www.cycletourist.com/temp/photo.php> That is a bit of overkill, but you can see what I mean. The watermark image (a png image) is included separately below the photo. I tried using a class from phpclasses.org <http://www.phpclasses.org/browse/package/1580.html...
5
4176
by: WT | last post by:
I am trying to crete a gif file with transparent backcolor on the fly but it seems that GDI refuses to do this. I am using samples from Bob Powell but it doesn't seem to work. First create a Bitmap public Bitmap MakeImage(string Text, SizeF Sf) { int width = (int)(Sf.Width)+2;
3
2531
by: b2bwild | last post by:
Hi everyone :). I quite new in Flash 8 professional edition and I'm trying to Publish a Gif / Png image. I've selected the "Transparent" option in the Publish Settings for Gif but when I publish it, I see a solid white background and a slight grey background in PNG image. I want to put that gif image in my HTML page. I'm completely stuck. Please help me publishing a GIF / PNG image with transparent background. Thank you in advance :). ...
3
4874
by: NickP | last post by:
Hi there, I have a usercontrol that inherits from Windows.Forms.Button. In the OnCreateControl method I set the style of the control so that it supports transparent backcolor and set the background color to transparent. ..... Protected Overrides Sub OnCreateControl()
0
1788
by: abc123456 | last post by:
Hello - I'm using imagecopyresample() to resize a GIF line-art type image onto a polygon created with GD_Image in PHP. Each has a transparent color (same color, I think!). The transparent color is dithering during the resize, though. Result is, some pixels aren't transparent anymore until I search the whole image for colors close rgb-wise to the original transparent color, and put it back to transparent. This color replacement step is...
0
9685
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10470
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10247
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10214
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10023
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9067
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7561
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
1
4135
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2935
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.