Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Tutorials and Tips

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 10-16-2012, 03:16 PM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default Editing Images with PHP

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!
__________________


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic

Last edited by PTGigi; 10-18-2012 at 09:51 AM.
Reply With Quote
  #2  
Old 10-16-2012, 03:16 PM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default

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$img20000$width$height100);

// 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$img20000$width$height100);
 
imagecopymerge($img1$img30000$width$height100);
 
// 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
__________________


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic

Last edited by PTGigi; 10-18-2012 at 09:49 AM.
Reply With Quote
  #3  
Old 10-16-2012, 03:17 PM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default

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$changecolor255255255);
  
 
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
__________________


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic

Last edited by PTGigi; 10-19-2012 at 09:46 AM.
Reply With Quote
  #4  
Old 10-16-2012, 03:18 PM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default

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


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic
Reply With Quote
  #5  
Old 10-16-2012, 03:48 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,350
Hall of Famer is on a distinguished road
Default

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


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
  #6  
Old 10-17-2012, 09:44 AM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default

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
__________________


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic
Reply With Quote
  #7  
Old 10-17-2012, 07:44 PM
Tequila's Avatar
Tequila Tequila is offline
The Grim One
 
Join Date: Jan 2009
Location: Souther Tier, New York State
Posts: 1,356
Gender: Female
Credits: 96,100
Tequila is on a distinguished road
Default

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

PS: Added your newest nuzlocke to my favorites on SJ. ;3
__________________
Artist. Designer. Gamer. Mother.
[portfolio] [tarot] [Rune Hollow] [freebies]
Reply With Quote
  #8  
Old 10-18-2012, 10:13 AM
PTGigi's Avatar
PTGigi PTGigi is offline
Crazily Friendly~HoF
 
Join Date: Jul 2009
Location: Somewhere >.>
Posts: 370
Gender: Female
Credits: 25,154
PTGigi
Default

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)
__________________


"I see now that the circumstances of one's birth are irrelevant; it is what you do with the gift of life that determines who you are."~Mewtwo
My Adoptables|Nuzlocke Webcomic
Reply With Quote
  #9  
Old 02-26-2014, 12:06 AM
Kesstryl's Avatar
Kesstryl Kesstryl is offline
Member
 
Join Date: Feb 2012
Posts: 125
Gender: Female
Credits: 17,004
Kesstryl is on a distinguished road
Default

Has anyone ever tried to attempt this? I want to learn to do this so badly, but the original poster never finished the tutorial.
Reply With Quote
  #10  
Old 04-13-2015, 09:25 PM
Missy Master's Avatar
Missy Master Missy Master is offline
Pet-Sim.Online
 
Join Date: Jan 2010
Posts: 475
Gender: Unknown/Other
Credits: 44,509
Missy Master is an unknown quantity at this point
Default

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 ...
Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Editing Side Bar Links GuardiansWish Questions and Supports 4 10-22-2012 08:18 AM
Editing adoptables Papyrus Questions and Supports 2 01-24-2012 05:53 AM
Editing the HTML side of the CSS? Sasoragon Questions and Supports 6 02-17-2011 09:40 AM
Editing Content Rozel Questions and Supports 4 01-29-2011 12:14 PM
Editing pages. Saphira Questions and Supports 1 01-11-2009 04:46 PM


All times are GMT -5. The time now is 06:28 AM.

Currently Active Users: 443 (0 members and 443 guests)
Threads: 4,080, Posts: 32,024, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636