Image Twiddler

Image Twiddler is a demonstration of a fairly complete client application, which supports client side image editing inside a web browser. The small application ties together the ideas presented previously, using ImageAlter and DragAndDrop.

Please note that this example is based off of the older ImageAlter 2 code base. The ImageAlter 4 service has a different API and is substantially faster.

<html>
<head>
  <title>The Image Twiddler</title>

  <!-- site-specific styling code -->
  <style type="text/css" media="screen">
    #dropArea {
      width:  600px;
      height: 400px;
      border: 1px dashed #999;
    }
  </style>
  
</head>
<body>
<div id="dropArea"> drop a photo here... </div>
<div id="controls">
<a href="#" id="rotateLeft">rotate left</a> |
<a href="#" id="rotateRight">rotate right</a> |
<select id="effectSelection">
  <option value="">select an effect</option>
  <option value="enhance">Enhance</option>
  <option value="grayscale">Gray Scale</option>
  <option value="solarize">Solarize</option>
  <option value="sepia">Sepia</option>
  <option value="oilpaint">Oil Paint</option>
  <option value="psychedelic">Psychedelic</option>
  <option value="sharpen">Sharpen</option>
</select>
<select id="cropSelection">
  <option value="">crop image</option>
  <option value="crop_center">middle 50%</option>
  <option value="right_half">right half</option>
  <option value="left_half">left half</option>
</select>
</div>
<!-- inclusion of JS library for BrowserPlus access -->
<script src="/js/browserplus.js"></script>  

<!-- site-specific javascript code -->
<script>

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

// the set of modifications are to be performed on the image
var imageParameters = {
  file: null,
  quality: 50,
  actions: [
    { scale: { maxwidth: 600, maxheight: 400 } }
  ],
  format: "png"      
};

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

function renderImage() {
  BrowserPlus.ImageAlter.transform(imageParameters,
    function (result) {
      if (!result.success) {
        alert("failed to modify image: " + result.error +
              result.verboseError); 
        return;
      }
      BrowserPlus.FileAccess.GetURL(
        { file: result.value.file },
        function (r) {        
          var img = document.createElement('img')
          img.setAttribute('src', r.value);
          img.setAttribute('width', result.value.width);
          img.setAttribute('height', result.value.height);
          var target = document.getElementById("dropArea");
          removeChildren(target);
          target.appendChild(img);
        });
    });
}

function cropRequested() {
  // a workaround for ImageAlter version 4.0.4 and lower which doesn't
  // handle integer 0 or integer 1.  Fixed in 4.0.5 by this commit:
  // http://github.com/browserplus/bp-imagealter/commit/fe86b8a68951d08901a8e16744eed927d8763b6d
  // once 4.0.5 is in production one should "minversion" up to it and
  // remove this zero/one gunk
  var zero = 0.01;
  var one = .99;

  var s = document.getElementById("cropSelection");
  var cropObj;
  if (s.selectedIndex > 0)  {
    var o = s.options[s.selectedIndex];
    if (o.value == "right_half") {
      cropObj = [ 0.5, zero, one, one ];
    } else if (o.value == "left_half") {
      cropObj = [ zero, zero, .5, one ];
    } else {
      cropObj = [ .25, .25, .75, .75 ];
    }
  } else {
    cropObj = [ zero, zero, one, one ];
  }

  // we always apply cropping first, so that "left half" and "right half"
  // have a consistent meaning
  if (imageParameters.actions[0].crop) {
    imageParameters.actions[0].crop = cropObj;
  } else {                  
    imageParameters.actions.splice(0, 0, { crop: cropObj });    
  }

  renderImage();
  return false; // no navigation
}

function effectSelected() {
  var s = document.getElementById("effectSelection");
  var effect = null;
  if (s.selectedIndex > 0)  {
    var o = s.options[s.selectedIndex];
    effect = o.value;
  }

  // replace previous effect if found
  var i;
  for (i = 0; i < imageParameters.actions.length; i++) {
    if (typeof imageParameters.actions[i] === 'string') {
      break;
    }                  
  }

  // if an effect is selected, add it or update the previous effect
  if (effect) {                  
    if (i == imageParameters.actions.length) {
      imageParameters.actions.push(effect);
    } else {
      imageParameters.actions[i] = effect;
    }
  } else if (i < imageParameters.actions.length) {
    imageParameters.actions.splice(i, 1);
  }

  renderImage();
  return false; // no navigation
}

function setRotate(degChange) {
  var action = null;
  var scale = null;
  for (var i = 0; i < imageParameters.actions.length; i++) {
    if (imageParameters.actions[i].rotate) {
      action = imageParameters.actions[i];
    }                  
    else if (imageParameters.actions[i].scale) {
      scale = imageParameters.actions[i].scale;
    }                  
  }
  if (!scale) {
    throw "couldn't find scale argument!  inconsistent state";
  }
  if (!action) {
    action = {rotate: 0};
    imageParameters.actions.push(action); 
  }
  action.rotate += degChange;
  var swp = scale.maxheight;
  scale.maxheight = scale.maxwidth;
  scale.maxwidth = swp;
}

function rotateLeftClicked() {
  setRotate(-90);
  renderImage();
  return false; // no navigation
}

function rotateRightClicked() {
  setRotate(90);
  renderImage();
  return false; // no navigation
}

function imageDropped(r) {
  // let's downscale a version of the image at drop time
  BrowserPlus.ImageAlter.transform({
    // ignore multiple files dropped
    file: r[0],
    quality: 50,
    actions: [ { scale: { maxwidth: 600, maxheight: 400 } } ],
    format: "png"
  }, function(r) {
    if (r.success) {
      imageParameters.file = r.value.file;
      renderImage();
    }
  });
};

function userHovering(isHovering) {
 var tgt = document.getElementById('dropArea');
  var msg = (isHovering ? "Drop it, mang!" : "drop a photo here...");
  tgt.innerHTML = msg;
}

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(){});

    // now set up controls
    var e = document.getElementById("rotateLeft");
    e.onclick = rotateLeftClicked;
    e = document.getElementById("rotateRight");
    e.onclick = rotateRightClicked;
    e = document.getElementById("effectSelection");
    e.onchange = effectSelected;
    e = document.getElementById("cropSelection");
    e.onchange = cropRequested;
  }

  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>

Run Example

Image Twiddler

^Docs

^Web Developers

Example Code