lloyd/ImageAlter perf comparison.html

## ImageAlter perf comparison.html
<html>
<head>
  <title>The Image Manipulation Performance Comparator</title>

  <!-- site-specific styling code -->
  <style type="text/css" media="screen">
    #dropArea {
      width:  200px;
      height: 200px;
      border: 1px dashed #999;
    }
  </style>

</head>
<body>
<div id="dropArea"> drop a photo here to begin comparison... </div>
<table border="1">
<tbody id="output">
<tr><th>operation</th><th>IM based time</th><th>GM based time</th></tr>
</tbody>
</table>

<!-- inclusion of JS library for BrowserPlus access -->
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- site-specific javascript code -->
<script type="text/javascript">

var IA4V = "4.0.3";
var IA3V = "3.0.2";

var requiredServices = [
  {service: "DragAndDrop"},
  {service: "ImageAlter", version: IA4V },
  {service: "ImageAlter", version: IA3V },
  {service: "FileAccess", version: "1"}
];

var tests = [
  [ "cropping", {
      ia: { crop: { x1: 0.0, x2: 1.0, y1: 0.0, y2: 1.0 } },
      gm: { actions: [ { crop: [ 0.25, 0.25, 0.75, 0.75 ] } ] }
    }
  ],
  [ "high quality thumbnailing", {
      ia: { maxwidth: 100, quality: 75 },
      gm: { actions: [ { scale: {maxwith: 100} } ], quality: 75 }
    }
  ],
  [ "fast thumbnailing", {
      ia: { maxwidth: 100, quality: 10 },
      gm: { actions: [ { scale: {maxwith: 100} } ], quality: 10 }
    }
  ],
  [ "rotation", {
      ia: { rotation: 90, quality: 75 },
      gm: { actions: [ { rotate: 90 } ], quality: 75 }
    }
  ],
  [ "sepia and swirl", {
      ia: { effects: [ "sepia", "swirl" ], quality: 50 },
      gm: { actions: [ "sepia", "swirl" ], quality: 50 }
    }
  ],
  [ "scale and rotate 90", {
      ia: { maxwidth: 100, maxheight: 100, rotation: 90, quality: 50 },
      gm: { actions: [ { scale: { maxwidth: 100, maxheight: 100 } }, { rotate: 90 } ], quality: 50 }
    }
  ]
];

var currentRow = null;
var test = 0;
var phase = "ia";

function imageDropped(r) {
  var theFile = r[0];

  if (test >= tests.length) return;
  if (currentRow === null) {
    var row = document.createElement("tr");
    row.appendChild(document.createElement("td"));
    row.firstChild.innerHTML = tests[test][0];
    var tab = document.getElementById("output");
    tab.appendChild(row);
    currentRow = row;
  }

  var startTime = new Date();
  // now let's run that phase
  if (phase == "ia") {
    var args = tests[test][1].ia;
    args.file = theFile;
    BrowserPlus.ImageAlter[IA3V].Alter(args, function() {
      var took = (new Date() - startTime) + "ms";
      var box = document.createElement("td");
      box.innerHTML = took;
      currentRow.appendChild(box);
      phase = "gm";
      imageDropped(r);
    });
  }
  else
  {
    var args = tests[test][1].gm;
    args.file = theFile;
    BrowserPlus.ImageAlter[IA4V].transform(args, function() {
      var took = (new Date() - startTime) + "ms";
      var box = document.createElement("td");
      box.innerHTML = took;
      currentRow.appendChild(box);
      phase = "ia";
      test++;
      currentRow = null;
      imageDropped(r);
    });
  }
}

function loadUI(result) {
  if (!result.success) {
    alert("you must install the required services " +
      "if you want to use this site.");
    return;
  }

  // cool, we've got what we need let's set up a drop target
  BrowserPlus.DragAndDrop.AddDropTarget({id: "dropArea"}, function(){});
  BrowserPlus.DragAndDrop.AttachCallbacks({
    id: "dropArea",
    hover: function (on) {
      document.getElementById('dropArea').style.background =
        on ? "#FF99FF" : "#FFFFFF";
    },
    drop: imageDropped},
    function(){});
  }

  BrowserPlus.init(function(result) {
    if (!result.success) {
      alert("you must install browserplus to run this demo");
      return;
    }
    // cool, B+ is installed, let's specify the services we want
    BrowserPlus.require({services: requiredServices}, loadUI);
});

</script>
</body>
</html>
	<html>
	<head>
	<title>The Image Manipulation Performance Comparator</title>

	<!-- site-specific styling code -->
	<style type="text/css" media="screen">
	#dropArea {
	width: 200px;
	height: 200px;
	border: 1px dashed #999;
	}
	</style>

	</head>
	<body>
	<div id="dropArea"> drop a photo here to begin comparison... </div>
	<table border="1">
	<tbody id="output">
	<tr><th>operation</th><th>IM based time</th><th>GM based time</th></tr>
	</tbody>
	</table>

	<!-- inclusion of JS library for BrowserPlus access -->
	<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

	<!-- site-specific javascript code -->
	<script type="text/javascript">

	var IA4V = "4.0.3";
	var IA3V = "3.0.2";

	var requiredServices = [
	{service: "DragAndDrop"},
	{service: "ImageAlter", version: IA4V },
	{service: "ImageAlter", version: IA3V },
	{service: "FileAccess", version: "1"}
	];

	var tests = [
	[ "cropping", {
	ia: { crop: { x1: 0.0, x2: 1.0, y1: 0.0, y2: 1.0 } },
	gm: { actions: [ { crop: [ 0.25, 0.25, 0.75, 0.75 ] } ] }
	}
	],
	[ "high quality thumbnailing", {
	ia: { maxwidth: 100, quality: 75 },
	gm: { actions: [ { scale: {maxwith: 100} } ], quality: 75 }
	}
	],
	[ "fast thumbnailing", {
	ia: { maxwidth: 100, quality: 10 },
	gm: { actions: [ { scale: {maxwith: 100} } ], quality: 10 }
	}
	],
	[ "rotation", {
	ia: { rotation: 90, quality: 75 },
	gm: { actions: [ { rotate: 90 } ], quality: 75 }
	}
	],
	[ "sepia and swirl", {
	ia: { effects: [ "sepia", "swirl" ], quality: 50 },
	gm: { actions: [ "sepia", "swirl" ], quality: 50 }
	}
	],
	[ "scale and rotate 90", {
	ia: { maxwidth: 100, maxheight: 100, rotation: 90, quality: 50 },
	gm: { actions: [ { scale: { maxwidth: 100, maxheight: 100 } }, { rotate: 90 } ], quality: 50 }
	}
	]
	];

	var currentRow = null;
	var test = 0;
	var phase = "ia";

	function imageDropped(r) {
	var theFile = r[0];

	if (test >= tests.length) return;
	if (currentRow === null) {
	var row = document.createElement("tr");
	row.appendChild(document.createElement("td"));
	row.firstChild.innerHTML = tests[test][0];
	var tab = document.getElementById("output");
	tab.appendChild(row);
	currentRow = row;
	}

	var startTime = new Date();
	// now let's run that phase
	if (phase == "ia") {
	var args = tests[test][1].ia;
	args.file = theFile;
	BrowserPlus.ImageAlter[IA3V].Alter(args, function() {
	var took = (new Date() - startTime) + "ms";
	var box = document.createElement("td");
	box.innerHTML = took;
	currentRow.appendChild(box);
	phase = "gm";
	imageDropped(r);
	});
	}
	else
	{
	var args = tests[test][1].gm;
	args.file = theFile;
	BrowserPlus.ImageAlter[IA4V].transform(args, function() {
	var took = (new Date() - startTime) + "ms";
	var box = document.createElement("td");
	box.innerHTML = took;
	currentRow.appendChild(box);
	phase = "ia";
	test++;
	currentRow = null;
	imageDropped(r);
	});
	}
	}

	function loadUI(result) {
	if (!result.success) {
	alert("you must install the required services " +
	"if you want to use this site.");
	return;
	}

	// cool, we've got what we need let's set up a drop target
	BrowserPlus.DragAndDrop.AddDropTarget({id: "dropArea"}, function(){});
	BrowserPlus.DragAndDrop.AttachCallbacks({
	id: "dropArea",
	hover: function (on) {
	document.getElementById('dropArea').style.background =
	on ? "#FF99FF" : "#FFFFFF";
	},
	drop: imageDropped},
	function(){});
	}

	BrowserPlus.init(function(result) {
	if (!result.success) {
	alert("you must install browserplus to run this demo");
	return;
	}
	// cool, B+ is installed, let's specify the services we want
	BrowserPlus.require({services: requiredServices}, loadUI);
	});

	</script>
	</body>
	</html>