Skip to main content

Responsive Images On-The-Fly with PHP and ImageMagick

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

Popular posts from this blog

Flags vs Vendor Prefixes for Experimental CSS

Google recently announced that it will be switching Chrome's rendering engine to a fork of Webkit, called “Blink”. If you're interested, you can read their blog post about Blink . One of the changes we will be seeing in Blink, is the use of browser flags in place of vendor prefixes . What this means, is that rather than prefixing experimental CSS with -webkit-, -moz-, -ms-, -o-, -khtml-, etc.; We will be required to enable these attributes using a flag in the browser (like the ones currently at chrome://flags). If you ask me, both ways have their advantages and disadvantages. Though, in the end, I lean towards the flags over the vendor prefixes, and here's why: #1 Code Bloat On average, using CSS with vendor prefixes requires writing it 5 times . Every time you use it . #2 Future Friendly Eventually, prefixed code will be replaced by the unprefixed code. #3 Browser Dev Friendly Browsers tend to continue to support the prefixed code, even if it doesn...

Element.focus() in IE9 running Jasmine tests with Karma

I recently udpated our Jasmine unit tests to run in Karma ; expanding our browser coverage, adding code coverage reports , and using fixtures for testing DOM manipulation . One of my tests kept failing in IE9, but only when I ran from the console. If I attempted to debug in the browser, everything passed. It turns out that IE9 (at least) needed a few ms to catch it's breath before correctly focusing on the starting element. To do this, I just added a 100ms delay before each test ran (Using Jasmine 2.3). beforeEach(function(done){ loadFixtures('myfixture.html'); // Setting focus in IE requires a delay to work correctly! setTimeout(function(){ done(); }, 100); });

Get width and height of a remote image with VB .NET

The Problem I wanted to grab the width and height of an image that was on a remote server. I've done this with PHP, but never in .NET. The Solution I did a little digging and came across this code (slightly modified for my own purposes). Dim request As HttpWebRequest = DirectCast(WebRequest.Create(URL), HttpWebRequest) request.Method = "GET" request.Accept = "image/*" Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse) Dim s As Stream = response.GetResponseStream() Dim bmp As New Bitmap(s) Width = bmp.Width Height = bmp.Height