lloyd/browserplus_image_scaling.html

## browserplus_image_scaling.html
<html>
<head>
  <title>BrowserPlus Image Scaling</title>

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

</head>
<body>
<div id="dropArea"> drop a photo here... </div>

<div id="timingDisplay"> </div>

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

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

var requiredServices = [
  {service: "DragAndDrop"},
  {service: "ImageAlter", version: "3", minversion: "3.0.2"},
  {service: "FileAccess", version: "1"}
];

function imageDropped(r) {
  function removeChildren(target) {
    while (target && target.childNodes.length > 0) {
       var kid = target.removeChild(target.firstChild);
       if (kid) { delete kid; }
    }
  }

  document.getElementById('dropArea').innerHTML = "nom nom, crunching...";

  var startTime = new Date();

  // let's downscale a version of the image at drop time
  BrowserPlus.ImageAlter.Alter({
    // ignore multiple files dropped
    file: r[0],
    quality: 30,
    maxwidth: 300,
    maxheight: 200
  }, function(r) {
    if (r.success) {
      BrowserPlus.FileAccess.GetURL(
        { file: r.value.file },
        function (r) {
          var img = document.createElement('img')
          img.setAttribute('src', r.value);
          img.setAttribute('width', r.value.width);
          img.setAttribute('height', r.value.height);
          var target = document.getElementById("dropArea");
          removeChildren(target);
          target.appendChild(img);

          // display timing
          target = document.getElementById("timingDisplay");
          removeChildren(target);
          var txt = document.createTextNode(
            "Image scaled in " + (new Date() - startTime) + "ms");
          target.appendChild(txt);
        });
    }
  });
};

function userHovering(isHovering) {
  if (isHovering) {
    document.getElementById('dropArea').innerHTML = "Drop it!";
  }
}

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: userHovering,
    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>BrowserPlus Image Scaling</title>

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

	</head>
	<body>
	<div id="dropArea"> drop a photo here... </div>

	<div id="timingDisplay"> </div>

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

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

	var requiredServices = [
	{service: "DragAndDrop"},
	{service: "ImageAlter", version: "3", minversion: "3.0.2"},
	{service: "FileAccess", version: "1"}
	];

	function imageDropped(r) {
	function removeChildren(target) {
	while (target && target.childNodes.length > 0) {
	var kid = target.removeChild(target.firstChild);
	if (kid) { delete kid; }
	}
	}

	document.getElementById('dropArea').innerHTML = "nom nom, crunching...";

	var startTime = new Date();

	// let's downscale a version of the image at drop time
	BrowserPlus.ImageAlter.Alter({
	// ignore multiple files dropped
	file: r[0],
	quality: 30,
	maxwidth: 300,
	maxheight: 200
	}, function(r) {
	if (r.success) {
	BrowserPlus.FileAccess.GetURL(
	{ file: r.value.file },
	function (r) {
	var img = document.createElement('img')
	img.setAttribute('src', r.value);
	img.setAttribute('width', r.value.width);
	img.setAttribute('height', r.value.height);
	var target = document.getElementById("dropArea");
	removeChildren(target);
	target.appendChild(img);

	// display timing
	target = document.getElementById("timingDisplay");
	removeChildren(target);
	var txt = document.createTextNode(
	"Image scaled in " + (new Date() - startTime) + "ms");
	target.appendChild(txt);
	});
	}
	});
	};

	function userHovering(isHovering) {
	if (isHovering) {
	document.getElementById('dropArea').innerHTML = "Drop it!";
	}
	}

	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: userHovering,
	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>