Can images be resized with a transparent background?

I am currently facing an issue with a function that creates 4 resized images. The problem is that images with transparent backgrounds are being recreated with a black background. Does anyone know how I can fix this? I would prefer the background to remain transparent, but I'd also be happy if it was white. Thank you for your assistance.

error_reporting(0);

$change="";
$abc="";


 define ("MAX_SIZE","5000");
 function getExtension($str) {
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
 }

 $errors=0;

 if($_SERVER["REQUEST_METHOD"] == "POST")
 {
    $image =$_FILES["file"]["name"];
    $uploadedfile = $_FILES['file']['tmp_name'];


    if ($image) 
    {

        $filename = stripslashes($_FILES['file']['name']);

        $extension = getExtension($filename);
        $extension = strtolower($extension);


 if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) 
        {

            $change='<div class="msgdiv">Unknown Image extension </div> ';
            $errors=1;
        }
        else
        {

 $size=filesize($_FILES['file']['tmp_name']);


if ($size > MAX_SIZE*1024)
{
    $change='<div class="msgdiv">You have exceeded the size limit!</div> ';
    $errors=1;
}


if($extension=="jpg" || $extension=="jpeg" )
{
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefromjpeg($uploadedfile);

}
else if($extension=="png")
{
$uploadedfile = $_FILES['file']['tmp_name'];
$src = imagecreatefrompng($uploadedfile);

}
else 
{
$src = imagecreatefromgif($uploadedfile);
}

echo $scr;

list($width,$height)=getimagesize($uploadedfile);


$newwidth=60;
$newheight=60;
$newheight=($height/$width)*$newwidth;
$tmp=imagecreatetruecolor($newwidth,$newheight);

$newwidth1=128;
$newheight1=($height/$width)*$newwidth1;
$tmp1=imagecreatetruecolor($newwidth1,$newheight1);

newmosaic2resampled($tmp2,$src,0,0,0,0,$newwidth2,$newheight2,$width,$height);

newmosaic3resampled($tmp3,$src,0,0,0,0,$newwidth3,$newheight3,$width,$height);

$bg = imagecolorallocate($tmp, 255, 255, 255); // white background color

imagefill($tmp, 0, 0, $bg); 

imagecopyresampled($tmp,$src,255,255,255,$newwidth,$newheight,$width,$height);

imagecopyresampled($tmp1,$src,0,0,0,0,$newwidth1,$newheight1,$width,$height);

imagecopyresampled($tmp2,$src,0,0,0,0,$newwidth2,$newheight2,$width,$height);

imagecopyresampled($tmp3,$src,0,0,0,0,$newwidth3,$newheight3,$width,$height);

$filename = "images/". $_FILES['file']['name'];
$filename1 = "images/small/". $_FILES['file']['name'];
$filename2 = "images/100/". $_FILES['file']['name'];
$filename3 = "images/80/". $_FILES['file']['name'];


imagejpeg($tmp,$filename,100);
imagejpeg($tmp1,$filename1,100);
imagejpeg($tmp2,$filename2,100);
imagejpeg($tmp3,$filename3,100);

imagedestroy($src);
imagedestroy($tmp);
imagedestroy($tmp1);
imagedestroy($tmp2);
imagedestroy($tmp3);
}}

}

//If no errors registred, print the success message
 if(isset($_POST['Submit']) && !$errors) 
 {

   // mysql_query("update {$prefix}users set img='$big',img_small='$small' where user_id='$user'");
    $change=' <div class="msgdiv">Image Uploaded Successfully!</div>';
 }

Answer №1

If you need transparency, opt for PNG over JPEG.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to prevent an element from displaying a hover border or outline

I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require ...

The scrollbar within the Iframe stops before reaching the end of the content. Is there a method to adjust the scrollbar height to match the height

Is there anyone who can assist me with this issue? A large webpage is getting cut off by about 70% near the end of the scroll bar. Here is the code snippet in question: </div> <div id="divCustomDataPreview" title="Custom Form Preview" styl ...

The rendering of the font appears distinct when viewed on an iPad compared to when displayed

Visit this website. The menu displays correctly on desktop, but on iPads, the font appears larger leading to a line break. Is it because the selected font isn't loading and defaulting to Times New Roman instead? It seems likely since I experience the ...

What is the best way to include a minified bootstrap file in a TypeScript project?

Instead of using react-bootstrap, I only want to add the minified CSS. I went ahead and copied the original CSS file into my project, then added the path in the index.html, but unfortunately, it's still not working. <head> <meta charset=&quo ...

VueJs and the behavior of styling elements with inline CSS

Within my HTML, there is an <input> element that has the ability to change the background color of a <p> through an inline style. I conducted an experiment using two different methods to apply the style, and I encountered a peculiar behavior: w ...

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

Activate both animation scaling and endless rotation simultaneously when hovering

I've been experimenting with an animation that involves a link with a scaled background color and continuous rotation effect when hovered. I've attempted to merge the two animations, but unfortunately, it's not working as expected. Below is ...

The background image on my screen seems to be malfunctioning and not displaying properly

I'm facing an issue with setting an image as the background of the banner section on my website. Despite trying various solutions and researching similar problems, I haven't been able to resolve it. Specifically, I am attempting to set the backgr ...

Can the position of the popover be customized using the right and top properties?

Utilizing Bootstrap popover within a gantt chart, I am dynamically adjusting the position of the popover based on mouse hover. popover.css('left', event.pageX + 'px'); popover.css('top', event.pageY+ 'px') However, ...

Attempting to generate two columns out of a list of divs, with additional white space in the left column

I am attempting to render a series of divs into two columns. However, when viewing the example in this [JSFiddle](http://jsfiddle.net/nb32P/2/) link, I noticed there is extra spacing above Group Heading 4 in the left column that I cannot seem to remove. ...

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

Styling with CSS to have radio buttons positioned on the left side of the label

Struggling to shift the labels of my radiobuttons to the left using CSS, but nothing seems to be working. Can anyone lend a hand with this? asp:RadioButtonList ID="rbid" runat="server" RepeatDirection="Vertical" RepeatLayout="Table" TextAlign="left" > ...

Please indicate the quantity of items to be displayed in a panel equipped with a scrollbar

Take a look at the current picture: https://i.sstatic.net/11T4tm.png The issue is figuring out how to reduce its size and then implementing a scrollbar to navigate through the other elements. I am working with Bootstrap, and below is my code snippet: ...

CSS: When multiple div elements are stacked on top of each other, only the one being hovered over will have

Stacked div elements have a border on hover. However, when hovering over a div, both the hovered div and its parent div get borders. Check out the JS Fiddle here <div class="container"> <div class="button1"> <div class="button ...

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

Having trouble getting Flex 1:1 to function properly in conjunction with the Ionic grid. Looking to evenly allocate space using a 50:50 ratio

.scss .content { ion-grid { height: 100% !important; } .row1 { flex: 1 !important; } .row2 { flex: 1 !important; } } .html <ion-content class="content"> <ion-grid> <ion-row class="row1 ...

Dynamic styling with jQuery input focus animation

Whenever I interact with the input field, I want my border colors to animate in and fade out smoothly. But I'm facing some challenges. Here is how I've set it up: HTML <input type="text" id="search-input" placeholder=&quo ...

Position a div off-center using CSS styling

Currently, I am utilizing a flexbox to center a div inside another div, akin to a dialog window that pops up at the center of the screen when required. The functionality is sound, but aesthetically it would be more pleasing if the space above and below th ...

Creating a mobile-friendly layout with 3 columns: Tips and tricks

I attempted to solve the issue independently but didn't have much success. My goal is to create a proper version for mobile users using bootstrap, however, it currently looks terrible on mobile devices. I suspect the problem lies with the div classes ...