Defvayne23.com » PHP

jTube – Not Just for Javascript

John Hoover — Sat, 12 Jun 2010 14:53:51 +0000

My jQuery YouTube API plugin, jTube, has now been ported to a PHP class. The two work similar in the fact that you set a query type (user uploads, feed, playlist, etc.) and set some options. Below is an example:


include("jTube.Query.php");
 
$oVideos = new jTubeQuery;
$oVideos->setQuery("user", "defvayne23", "uploads");
$oVideos->setOption("limit", 5);
 
try {
	$aVideos = $oVideos->runQuery();
} catch(Exception $e) {
	die($e->getMessage());
}
 
// Use $aVideos

With the PHP class jTube can now make use of authentication and with that the entire YouTube API. The YouTube API allows for anything from uploading a video to supplying feedback on a video (rate, comment, flag). The PHP class already can make use of authentication tokens to retrieve private info for the user that belongs to the token. The first new functionality coming to the PHP class is video managing and upload.

Checkout jTube for PHP on github now.

Use GD – 2a: Not Modified

John Hoover — Tue, 11 May 2010 20:31:09 +0000

When creating an image with PHP per call, why should the server have to create the image every time. In part two of using GD I’ll show how to use the 304 Not Modified header, and storing the image as cache.

To start we need to pass more info about the image from the previous post. Need to pass the last modified date and time, tell the browser that it can cache it and for how long, when the image would expire and an ID for the file.

header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
header("Pragma: public");
header("Cache-Control: maxage=".(60*60*24*2));
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
header("ETag: ".md5($sFile));

Now that the browser knows this info, it will pass it back in the next call. We use this info to check to make sure the browser has the right file, and if so, tell the browser that the file has not changed and use what it already has. We pass all the headers from before again so the browser has them for the next time it calls for the image. Once all the headers are passed we must exit so we don’t do process that isn’t needed.

if ($_SERVER["HTTP_IF_MODIFIED_SINCE"] == gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT"
  && $_SERVER["HTTP_IF_NONE_MATCH"] == md5($sFile)) {
	header('HTTP/1.1 304 Not Modified');
	header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
	header("Pragma: public");
	header("Cache-Control: maxage=".(60*60*24*2));
	header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
	header("ETag: ".md5($sFile));
	exit;
}

Now lets put it all together.

// Set image info
$sFile = "image.jpg";
$aInfo = getimagesize($sFile);
list($sWidth, $sHeight, $sType) = $aInfo;
 
// Check if file is cached in the browser
if ($_SERVER["HTTP_IF_MODIFIED_SINCE"] == gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT"
  && $_SERVER["HTTP_IF_NONE_MATCH"] == md5($sFile)) {
	header('HTTP/1.1 304 Not Modified');
	header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
	header("Pragma: public");
	header("Cache-Control: maxage=".(60*60*24*2));
	header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
	header("ETag: ".md5($sFile));
	exit;
}
 
// Load image
switch($sType)
{
	case IMAGETYPE_GIF: $oImage = imagecreatefromgif($sFile); break;
	case IMAGETYPE_JPEG: $oImage = imagecreatefromjpeg($sFile); break;
	case IMAGETYPE_PNG: $oImage = imagecreatefrompng($sFile); break;
	default: die("Image type not found");
}
 
$sCropOffsetX = 148;
$sCropOffsetY = 119;
$sCropWidth = 350;
$sCropHeight = 275;
 
$oCrop = imagecreatetruecolor($sCropWidth, $sCropHeight);
imagefill($oCrop, 0, 0, imagecolorallocate($oCrop, 255, 255, 255));
 
// Crop image onto canvas
imagecopyresized($oCrop, $oImage, 0, 0, $sCropOffsetX, $sCropOffsetY, $sWidth, $sHeight, $sWidth, $sHeight);
imagedestroy($oImage);
 
$sMime = image_type_to_mime_type($aInfo);
header("Content-type: ".$sMime);
header("Last-Modified: ".gmdate("D, d M Y H:i:s", filemtime($sFile))." GMT");
header("Pragma: public");
header("Cache-Control: maxage=".(60*60*24*2));
header("Expires: ".gmdate("D, d M Y H:i:s", strtotime("+2 days"))." GMT");
header("ETag: ".md5($sFile));
 
switch($sType)
{
	case IMAGETYPE_JPEG: imagejpeg($oCrop); break;
	case IMAGETYPE_PNG: imagepng($oCrop); break;
	case IMAGETYPE_GIF: imagegif($oCrop); break;
	default: die("Image type not found");
}
imagedestroy($oCrop);

Use GD: Part 1 – Crop Image

John Hoover — Thu, 25 Feb 2010 16:29:16 +0000

This is the first in a series of accepting a users image, selecting the area, and cropping it. First we will start with the guts of the process and build on top of that.

When letting users upload images for a site, you normally would like the images to be the same ratio and size. To do this we need to crop the image. To get things started lets select the image.

Now that we have the image we need to load the image into GD before we can do anything with it. You can find all the GD functions we use here.

// Set image info
$sFile = "image.jpg";
$aInfo = getimagesize($sFile); //Get info on the image like width, height, and type
list($sWidth, $sHeight, $sType) = $aInfo; //Pull the info from the $aInfo array
 
// Load image
switch($sType)
{
	case IMAGETYPE_GIF: $oImage = imagecreatefromgif($sFile); break;
	case IMAGETYPE_JPEG: $oImage = imagecreatefromjpeg($sFile); break;
	case IMAGETYPE_PNG: $oImage = imagecreatefrompng($sFile); break;
	default: die("Image type not found");
}

Learn about list().

We start things off in the above code by getting info on the image. We will need to know the current image size later. Then load the image into GD based on image type.

Now that we have the image in GD we need to select the area we want to keep of the image. If you are letting the user crop an image I suggest either Jcrop or Cropper UI. What we use from the cropper is the offset x & y, and the selected area width and height.

$sCropOffsetX = 148;
$sCropOffsetY = 119;
$sCropWidth = 350;
$sCropHeight = 275;

With our selector info we will start off by creating an image object with the new width and height. This will create our new canvas. After we create the canvas I always change the canvas color to white because the default is black (no color). Now we have everything we need. Now all we have to do is place the original image over the new canvas and everything that doesn’t fit gets cut off and removed. Once we are done cropping we can delete the original image, this frees up memory.

$oCrop = imagecreatetruecolor($sCropWidth, $sCropHeight); //Create image object with the width and height of the selected area.
imagefill(
	$oCrop, //Our selected area object we just created
	0, 0, //Position to start filling the image
	imagecolorallocate($oCrop, 255, 255, 255) //Create the color white for the background to use in our selected area object
);
 
// Crop image onto canvas
imagecopyresized(
	$oCrop, //New image
	$oImage, //Original image
	0, 0, //Position to place original
	$sCropOffsetX, $sCropOffsetY, //Position to place selected area ($oCrop)
	$sWidth, $sHeight, $sWidth, $sHeight //We are not actually resizing the image, so we pass the current width and height for both source and destination
);
imagedestroy($oImage);

As you can see in the image below, everything that is washed out is what gets removed.

Now we have our image, it’s time to pass the results to the user. First we must tell the user’s browser what type of image we are passing it, then pass the image based on type. Don’t forget to destroy the image to clean up the memory.

$sMime = image_type_to_mime_type($aInfo);
header("Content-type: ".$sMime); //Tells the browser what type of info we are sending it
 
switch($sType)
{
	case IMAGETYPE_JPEG: imagejpeg($oCrop); break;
	case IMAGETYPE_PNG: imagepng($oCrop); break;
	case IMAGETYPE_GIF: imagegif($oCrop); break;
	default: die("Image type not found");
}
imagedestroy($oCrop);

That’s all there is too it.

// Set image info
$sFile = "image.jpg";
$aInfo = getimagesize($sFile);
list($sWidth, $sHeight, $sType) = $aInfo;
 
// Load image
switch($sType)
{
	case IMAGETYPE_GIF: $oImage = imagecreatefromgif($sFile); break;
	case IMAGETYPE_JPEG: $oImage = imagecreatefromjpeg($sFile); break;
	case IMAGETYPE_PNG: $oImage = imagecreatefrompng($sFile); break;
	default: die("Image type not found");
}
 
$sCropOffsetX = 148;
$sCropOffsetY = 119;
$sCropWidth = 350;
$sCropHeight = 275;
 
$oCrop = imagecreatetruecolor($sCropWidth, $sCropHeight);
imagefill($oCrop, 0, 0, imagecolorallocate($oCrop, 255, 255, 255));
 
// Crop image onto canvas
imagecopyresized($oCrop, $oImage, 0, 0, $sCropOffsetX, $sCropOffsetY, $sWidth, $sHeight, $sWidth, $sHeight);
imagedestroy($oImage);
 
$sMime = image_type_to_mime_type($aInfo);
header("Content-type: ".$sMime);
 
switch($sType)
{
	case IMAGETYPE_JPEG: imagejpeg($oCrop); break;
	case IMAGETYPE_PNG: imagepng($oCrop); break;
	case IMAGETYPE_GIF: imagegif($oCrop); break;
	default: die("Image type not found");
}
imagedestroy($oCrop);

Once we have the image, why should we have to re-create it for the next call? That is for another post. We will cover storing the file, and using headers to allow the header to cache the file.