I've seen some responsive image solutions proposed, and they seem great. But there's still some debate and it will be a while before support is widespread.
In the meantime, I've expanded on a method I've been using for re-sizing images on the fly, which I believe can be further expanded on to make it even better.
Basically, I use a PHP script and ImageMagick to generate a re-sized and cropped image, which I also cache for later use. Here's the essentials of the script I'm using:
Using this script, I can request re-sized images via JavaScript, or even CSS (presuming the image is in a background) based on the current screen resolution and pixel density. This may not be the most elegant solution, but it's worked fairly well for me.
For the purpose of this example, assume this script resides at domain.com/tools/
Note: This is an untested adaptation of a working script. It may not work as-is.
$file = urldecode($_GET['f']);
$width = 150;
$path = "../images/resized/";
$crop = true;
$suffix = ""; // Additional text to append to the new filename
$old_width = 0;
$old_height = 0;
function ranger($url)
{
$headers = array("Range: bytes=0-32768");
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($curl);
curl_close($curl);
return $data;
}
// Width
if( isset($_GET['w']) && is_numeric($_GET['w']) && ($_GET['w'] > 0) )
{
$width = $_GET['w'];
}
$suffix = $width; // Always include width in the suffix
// Height
if( isset($_GET['h']) && is_numeric($_GET['h']) && ($_GET['h'] > 0) )
{
$height = $_GET['h'];
$suffix .= "x".$height;
}
// Crop the image?
if( isset($_GET['c']) && $_GET['c'] == 0 )
{
$crop = false;
$suffix .= "_nocrop";
}
$file = preg_replace( "/\s/", "%20", $file );
//Get ampersands out of there
$file = preg_replace( "/&/", '%26', $file );
$newfile = preg_replace( "/\\\/", "/", $file );
//Rename: (filename)_$suffix.(ext)
$newfile = $path . preg_replace( "/^.*\/(.*)\.([^.]+?)$/", "$1_" .$suffix. ".$2", $newfile);
//Decode URL encodings
$newfile = urldecode($newfile);
//Get ampersands out of there
$newfile = preg_replace( "/&/", 'and', $newfile );
//Replace whitespaces with underscore
$newfile = preg_replace( "/\s+/", "_", $newfile );
// If the file doesn't exist in the cache, create it.
if( !file_exists( $newfile ) )
{
try{
if( isset($height) ){
// Fallback: Use 2x requested size
$sizeW = $width * 2;
$sizeH = $height * 2;
// Use 1/2 original size for the constraints
$raw = ranger($file);
$im = imagecreatefromstring($raw);
$old_width = imagesx($im);
$old_height = imagesy($im);
if( $old_width > 0 && $old_height > 0 ){
$sizeW = $old_width/2;
$sizeH = $old_height/2;
}
if( $crop )
{
$cmd = 'convert -define jpeg:size='.$width.'x'.$height.' -crop '.$width.'x'.$height.'+0+0 -thumbnail "'.$width.'x'.$height.'^" -gravity center "'.$file.'" '.$newfile;
}
else
{
$cmd = 'convert -define jpeg:size='.$sizeW.'x'.$sizeH.' -thumbnail "'.$width.'x'.$height.'>" -gravity center "'.$file.'" '.$newfile;
}
}
else
{
$cmd = 'convert -thumbnail "'.$width.'>" -gravity center "'.$file.'" '.$newfile;
}
system($cmd, $retval);
if( !file_exists( $newfile ) )
{
echo 'Thumbnail failed: ', $retval, "\n\n";
echo($cmd);
}
}
catch(Exception $e)
{
echo 'caught exception: ', $e->getMessage(), "\n";
echo($cmd);
}
}
if( file_exists( $newfile ) )
{
// Faster and easier to just redirect to the new file... ?
header("Location: http://domain.com/" . preg_replace("\.\.", "", $newfile) );
// $mime = getimagesize($newfile);
// $mime = image_type_to_mime_type($mime[2]);
// header("Content-type: ".$mime);
// $fn = fopen($newfile,'r');
// fpassthru($fn);
}
Comments
Post a Comment