Editing Images with PHP

[PTGigi]

Hi, so there's no "save draft" option that I can find sooooooooo I'm posting this unfinished tutorial here. Sorry about that, but feel free to post on the little bit I've got thrown up here. Thanks~

Right, first note, anything I type is not going to be related to the MysidiaScript but might be cool things to edit into your script. This is because I do not have a Mys site at the moment. Eventually I will get one (probably next release or so) but for now, bear with my random findings.

BUT YES! Editing images with PHP. The most I've experimented with are merging two images and recoloring an image, so I'll talk about those for now. ;D

Now you may ask yourself, why would I do this? I have -insert art program here-, why do I want to use PHP? Well, this lets you edit and merge images on the fly, and can save you lots of time and space.

First, we'll start with the basics. Then I'll show you how merge images and recolor them~

For these examples I'll only be referring to PNGs and GIFs since those are most used for adoptables I'd think.

Defining an image:
First you need to decide which file type you're using and whether you're saving it to the server or not. Each has a basic set up like so:

GIF (not saved to server):

PHP Code:

<?php
 header('Content-Type: image/gif');
 $img = imagecreatefromgif('imageurl');
  
 
 
 imagegif($img);
 imagedestroy($img);
 ?>

PNG (not saved to server):

PHP Code:

<?php
 header('Content-Type: image/png');
 $img = imagecreatefrompng('imageurl');
  
 
 
 imagepng($img);
 imagedestroy($img);
 ?>

If you notice only two lines are changed between changing file types, the header (which tells the browser what to expect (an image)) and the function used to generate the image. You /can/ input a gif and convert it to a png or vice versa too. Use whatever output you'd like.

But when you save to the server there's a line you must remove and some specifications you need to add to the "imageTYPE" method:
PNG (saved to server):

PHP Code:

<?php
 $img = imagecreatefrompng('imageurl');
 $path="path/to/make/new/file.png";



 $file = imagepng($img,$path);
 imagedestroy($img);
 echo "Image saved successfully! Saved image:<br /> <img src='".$path."' />";
 ?>

Like before, saving as a GIF if just as simple as changing "imagepng" to "imagegif". We take out the header because we want to echo out some text. We can then display the generated image because it now exists. The new parts we've added are simply putting the "imageTYPE" into a variable (so it can't throw out an image and give us an error) and adding the path where we want to save the image. Keep in mind if you make an image with the same name as another it'll save over it.

Right now this only outputs the image you just made. Which is boring...and pointless. SO NOW WE EDIT THEM!

[PTGigi]

Merging Images is surprisingly easier than I thought it would be when looking it up.

Instead of just outputting the image right away, we need to create an image PHP can use. Depending on the file type you can just change "imagecreatefrompng" to "imagecreatefromgif" if you want to use another filetype.

PHP Code:

  <?php
// bring your two (or more) images you want to merge in
$img1 = imagecreatefrompng('image1/path.png');
$img2 = imagecreatefrompng('image2/path.png');

//Get the height and width of the first (base) image:
$width=imagesx($img1);
$height=imagesy($img2);

// Merge the two images into one!
//Note: the 2nd image appears on top of the first image!
imagecopymerge($img1, $img2, 0, 0, 0, 0, $width, $height, 100);

// Output image (not saved to server)
header('Content-Type: image/png');
imagepng($img1);

imagedestroy($img1);
imagedestroy($img2);
?>

What this does is take our images and simply merge them together. Simple as that! :D Now I'll explain the imagecopymerge function so you can do this too ;D

imagecopymerge(IMAGE1,IMAGE2,X1,Y1,X2,Y2,WIDTH,HEIGHT,TRANSPAREN CY)
IMAGE1 is your first image, this is the base image which all your other images will go on top of. The new image is set to this variable.
IMAGE2 is your second image, this is the image that is being placed on top of the base image.
X1 and Y1 are the X and Y coordinates of the main image. Unless you're doing something special, it's best to leave this as 0,0. Note: 0,0 is the top-left of the image!
X2 and Y2 are the X and Y coordinates of the second image. If you want to position it over a certain part of your previous image, change these. Though I prefer to make all the images the same size and just have the placement done through transparent edges o3o
WIDTH and HEIGHT are the width and height of the main image. If you want this to be flexible you can use the functions imagesx() and imagesy() (as seen above) to get the width and the hieght of the image for you.
TRANSPARENCY is how translucent the image being placed is. The numbers range between 0-100, 100 being opaque and 0 is transparent.

But this fancy little code can not only merge two images, it can merge so many more images in one go! This is also rather easy in the grand scheme of things!

Simply duplicate the imagecopymerge, imagecreatefrompng, and imagedestroy lines and you're all set ;D

PHP Code:

  <?php
// bring your two (or more) images you want to merge in
$img1 = imagecreatefrompng('image1/path.png');
$img2 = imagecreatefrompng('image2/path.png');
 $img3 = imagecreatefrompng('image3/path.png');
 
//Get the height and width of the first (base) image:
$width=imagesx($img1);
$height=imagesy($img2);

// Merge the three images into one!
//Note: the 2nd image appears on top of the first image!
imagecopymerge($img1, $img2, 0, 0, 0, 0, $width, $height, 100);
 imagecopymerge($img1, $img3, 0, 0, 0, 0, $width, $height, 100);
 
// Output image (not saved to server)
header('Content-Type: image/png');
imagepng($img1);

imagedestroy($img1);
imagedestroy($img2);
 imagedestroy($img3);
 ?>

Now, this could get rather long and cumbersome. So if you do plan on merging lots of images I highly recommend making an array for this to loop your imagecreatefromTYPE, imagecopymerge, and imagedestroy lines. It works very well ;D

Aaaaaaand that's all for merging I suppose. If you have any questions feel free to ask! In the context of adoptables, you could use this to make items or accessories for adoptables or let users make their own custom avatars and the link. Fun no? :D

[PTGigi]

Recoloring an image is pretty easy, just kinda annoying to do. I'll be using GIFs as an example, because this method changes color by individual pixels, and PNGs can have lots of colors while GIFs generally have a more defined palette.

For this, we use the function imagecolorset as well as imagecolorexact. imagecolorset changes the defined color to a new one, while imagecolorexact picks the exact color we want to change. There are other functions to grab colors as well, but I find imagecolorexact to be the more flexible (there is also imagecolorclosest, which I've never tried to use and just discovered while typing up this tutorial. Sounds nicer though (grabs a color close to the one you selected if the one you selected doesn't exist), so I almost suggest using that XD). There's also imagecolorat which just defines it based on the specified pixel (x,y). It's very inflexible, so I don't really suggest using it.

PHP Code:

 <?php
 header('Content-Type: image/gif');
 $img = imagecreatefromgif('imageurl');
  
 $changecolor=imagecolorexact($img,255,255,255);
 imagecolorset($img, $changecolor, 255, 255, 255);
  
 imagegif($img);
 imagedestroy($img);
 ?>

Changing colors relies on RGB color values. If you don't know RGB very well, I'd suggest looking for a color picker that shows RGB values or a looking for a hex to RGB code snippet for PHP. I prefer the latter ;D

imagecolorexact(IMAGE,RED,GREEN,BLUE);
IMAGE is your image. This is so it can get the color palette from your image
RED the red value of the color (value between 0-255)
GREEN the green value of the color (value between 0-255)
BLUE the blue value of the color (value between 0-255)

DERP. I DECIDED TO START WRITING THIS IN THE MIDDLE OF CLASS. But now I have work to do sooooooo this will be left half finished until I get around to it. Sorry XD

[PTGigi]

Saving this post for...IDK. I'll just keep this just in case I need it.

[Hall of Famer]

Oh neat, thanks for writing this tutorial Gigi. I hope it will help some people out, sure it will.

[PTGigi]

Hello HoF! :3

Yeah I'm sure it will XD People could use it to add items/clothing to adoptables, or make custom avatars and such. 8D Course, I got to finish this first, but the possibilities are exciting! :D

[Tequila]

Eagerly awaiting the completion of this tutorial... ;3

PS: Added your newest nuzlocke to my favorites on SJ. ;3

[PTGigi]

Thank you! Busy with classes today so I'll try to get to this during the weekend~

Fixed an error with the saving to server. ^-^" (good thing I just tried to do that XD)

[Kesstryl]

Has anyone ever tried to attempt this? I want to learn to do this so badly, but the original poster never finished the tutorial.

[Missy Master]

I've had rotten luck learning this, haha. Just need to find a way to code backgrounds for Pet profiles ...removable ones. Well adding a toy in front of them would be pretty cool too, as long as it was removable. OR .. something I used to do was have a backup image to draw on ... to restore it ...