Initial commit

iandevlin · Oct 15, 2013 · aee37e8 · aee37e8
1 parent a61dc9b
commit aee37e8
Show file tree

Hide file tree

Showing 7 changed files with 285 additions and 3 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright (C) resImageCrop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,4 +1,60 @@
-resimagecrop
-============
+resimagecrop - RESS based solution for cropping images for responsive design
+===================================================
 
-RESS based solution for cropping images for responsive design
+- Author: Ian Devlin [iandevlin.com](http://iandevlin.com)
+- Twitter: [@iandevlin](http://twitter.com/iandevlin)
+
+Purpose
+=======
+
+There are many solutions out there for responsive images, and this is just another one.
+
+Disclaimer
+==========
+
+This is most definitely a work in progress and lots of things can be done to improve it. Take it as a "proof of concept"
+
+Features
+========
+
+- RESS based
+- Allows cropping of images based on percentage x and y co-ordinates to aid art direction
+- Images can also be scaled
+- MIT license
+
+Installation
+=============
+
+- Place `resimagecrop.php` in the root directory of your website (or anywhere else to be honest).
+
+Usage
+=====
+
+Use `resimagecrop.php` in the `src` attribute of an `img` element with the following parameters:
+
+- `image` the relative link to the original local image file
+- `x` the percentage x co-ordinate value within the original image where a crop should begin
+- `y` the percentage y co-ordinate value within the original image where a crop should begin
+- `w` the pixel width of the original image that is to be cropped
+- `h` the pixel height of the original image that is to be cropped
+- `sc` the decimal scaling factor of the resulting image
+
+Examples
+========
+
+`<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450" alt="A view of Saumur Castle in the Loire Valley in France" />`
+
+This is interpreted as:
+Take image `img/saumur-castle-loire-valley-france.jpg` and begin cropping it with dimensions 550x450 pixels, beginning from 15% from the top and 20% from the left.
+
+`<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450&sc=0.2" alt="A view of Saumur Castle in the Loire Valley in France" />`
+
+This is interpreted as:
+Take image `img/saumur-castle-loire-valley-france.jpg` and begin cropping it with dimensions 550x450 pixels, beginning from 15% from the top and 20% from the left, and scale the resulting image by a factor of 0.2 (20%).
+
+
+Known Issues
+=============
+- Only supports JPGs
+- Doesn't save image file and therefore caching is not facilitated
+- Probably lots of other stuff that you clever people will notice and point out to me.
diff --git a/img/saumur-castle-loire-valley-france.jpg b/img/saumur-castle-loire-valley-france.jpg
diff --git a/index-picturefill.html b/index-picturefill.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Responsive Image Crop with PictureFill</title>
+	<style>
+		body {
+			font-family:verdana, sans-serif;
+			background:#C5B3A5;
+			color:#fff;
+			text-align:center;
+		}
+		h1 { margin:5%; }
+		span[data-picture] {
+			display:block;
+			width:100%;
+			text-align:center;
+		}
+		@media only screen and (max-width:360px) {
+			h1 { font-size:90%; }
+		}
+	</style>
+</head>
+<body>
+	<h1>resImageCrop in Action with Scott Jehl's <a href="https://github.com/scottjehl/picturefill">pictureFill</a></h1>
+	<span data-picture data-alt="A view of Saumur Castle in the Loire Valley in France">
+		<span data-src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450&sc=0.5"></span>
+        <span data-src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450&sc=0.6" data-media="(min-width:360px)"></span>
+		<span data-src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=10&y=20&w=700&h=400" data-media="(min-width:768px)"></span>
+		<span data-src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=10&w=1200&h=600&sc=0.8" data-media="(min-width:800px)"></span>
+		<span data-src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=10&w=1200&h=600" data-media="(min-width:1200px)"></span>
+		<span data-src="img/saumur-castle-loire-valley-france.jpg" data-media="(min-width:1600px)"></span>
+	</span>	
+	<script src="picturefill.js"></script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Responsive Image Crop</title>
+	<style>
+		body {
+			font-family:verdana, sans-serif;
+			background:#C5B3A5;
+			color:#fff;
+			text-align:center;
+		}
+		figure { margin:0 0 60px; }
+		figcaption { margin-bottom:10px; }
+		img {
+			border:3px solid #fff;
+		}
+	</style>
+</head>
+<body>
+	<h1>resimagecrop in action</h1>
+	<div class="container">
+		<figure>
+			<figcaption>Normal <code>img</code> element</figcaption>
+			<img src="img/saumur-castle-loire-valley-france.jpg" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Image extracted via resimagecrop.php with no parameters (same as above)</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Image extracted via resimagecrop.php, scale 0.5</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&sc=0.5" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Portion of image: top 15%, left  20%, width 550px, height 450px</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Portion of image: top 15%, left  20%, width 550px, height 450px, scale 0.2 (resulting image is same as above with dimensions 110x90)</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450&sc=0.2" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Portion of image: top 15%, left  20%, width 1200px, height 600px</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=10&w=1200&h=600" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+		<figure>
+			<figcaption>Portion of image: top 15%, left  20%, width 1200px, height 600px, scale 0.5 (resulting image is same as above with dimensions 600x300)</figcaption>
+			<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=10&w=1200&h=600&sc=0.5" alt="A view of Saumur Castle in the Loire Valley in France" />
+		</figure>
+	</div>
+</body>
+</html>
diff --git a/picturefill.js b/picturefill.js
@@ -0,0 +1,61 @@
+/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */
+
+(function( w ){
+
+	// Enable strict mode
+	"use strict";
+
+	w.picturefill = function() {
+		var ps = w.document.getElementsByTagName( "span" );
+
+		// Loop the pictures
+		for( var i = 0, il = ps.length; i < il; i++ ){
+			if( ps[ i ].getAttribute( "data-picture" ) !== null ){
+
+				var sources = ps[ i ].getElementsByTagName( "span" ),
+					matches = [];
+
+				// See if which sources match
+				for( var j = 0, jl = sources.length; j < jl; j++ ){
+					var media = sources[ j ].getAttribute( "data-media" );
+					// if there's no media specified, OR w.matchMedia is supported 
+					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
+						matches.push( sources[ j ] );
+					}
+				}
+
+			// Find any existing img element in the picture element
+			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];
+
+			if( matches.length ){
+				var matchedEl = matches.pop();
+				if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
+					picImg = w.document.createElement( "img" );
+					picImg.alt = ps[ i ].getAttribute( "data-alt" );
+				}
+
+				picImg.src =  matchedEl.getAttribute( "data-src" );
+				matchedEl.appendChild( picImg );
+			}
+			else if( picImg ){
+				picImg.parentNode.removeChild( picImg );
+			}
+		}
+		}
+	};
+
+	// Run on resize and domready (w.load as a fallback)
+	if( w.addEventListener ){
+		w.addEventListener( "resize", w.picturefill, false );
+		w.addEventListener( "DOMContentLoaded", function(){
+			w.picturefill();
+			// Run once only
+			w.removeEventListener( "load", w.picturefill, false );
+		}, false );
+		w.addEventListener( "load", w.picturefill, false );
+	}
+	else if( w.attachEvent ){
+		w.attachEvent( "onload", w.picturefill );
+	}
+
+}( this ));
diff --git a/resimagecrop.php b/resimagecrop.php
@@ -0,0 +1,69 @@
+<?php
+// resimagecrop - version 0.0.1
+// RESS based solution for cropping images for responsive design
+// Most definitely a work in progress!
+
+// Author - Ian Devlin
+// Twitter - @iandevlin
+// Web - iandevlin.com
+
+// $image - the original image
+// $x - the x position to begin the crop from (percentage)
+// $y - the y position to begin the crop from (percentage)
+// $w - the width of the amount to crop (pixels)
+// $h - the height of the amount to crop (pixels)
+// $sc - the scale factor (decimal)
+//
+// For example
+// resimagecrop.php?image=img/image-to-use.jpg&x=15&y=20&w=550&h=450&sc=0.5
+// begins the crop of img/image-to-use.jpg at 15% from the top and 20% from the left and will crop a width of 550x450 and then scale it by 0.5 (resulting image is 275x225)
+//
+
+// Collect parameters
+$img = getParam('image');
+$x = intval(getParam('x'));
+$y = intval(getParam('y'));
+$w = intval(getParam('w'));
+$h = intval(getParam('h'));
+$sc = getParam('sc');
+if ($img) {
+	// Get a handle to the original image
+	$i = imagecreatefromjpeg($img);	
+	// Get the dimensions of the original image
+	$size = getimagesize($img);
+	$origWidth = intval($size[0]);
+	$origHeight = intval($size[1]);
+	// Set the correct header
+	header("Content-Type: image/jpg");
+	// If x, y, w, and h parameters have been passed...
+	if ($x && $y && $w && $h) {
+		// Work out the x and y co-ordinates of the original image where the crop is to begin
+		$cx = ($origWidth * $x) / 100;
+		$cy = ($origHeight * $y) / 100;
+		// Create a new image with the required width and height
+		$ci = imagecreatetruecolor($w, $h);
+		// Crop the image
+		imagecopy($ci, $i, 0, 0, $cx, $cy, $origWidth, $origHeight);
+		$i = $ci;
+	}
+	// If scaling is required...
+	if ($sc) {
+		if (!$w) $w = $origWidth;
+		if (!$h) $h = $origHeight;
+		// Define the width and height of the new scaled image
+		$scw = $w * $sc;
+		$sch = $h * $sc;
+		// Scale the image
+		$sci = imagecreatetruecolor($scw, $sch);
+		imagecopyresampled($sci, isset($ci) ? $ci : $i, 0, 0, 0, 0, $scw, $sch, $w, $h);
+		$i = $sci;
+	}
+	// Finish
+	imagejpeg($i);
+}
+
+// Extracts parameters
+function getParam($name) {
+	if (isset($_GET[$name])) return htmlspecialchars($_GET[$name]);
+	return '';
+}