Image annotation before upload?

[atw]

Hi guys,

I am looking to create an image upload application and allow users to annotate their images before uploading (I actually don't mind if it is before or after uploading--as long as they can annotate it).

The idea is that they (users):

1. Browse to the photo
2. Confirm that photo
3. Use drawing tools (either basic boxes or, ideally, a basic MS Paint-style paint brush system
4. Add a note to the drawing
5. The content of this drawing, gets uploaded along-side the photo (which I can then access myself)

This is definitely going to be quite complicated.

My questions are:

1. Which technology should I use for this (Flash, Flex, AIR, Silverlight, JavaScript etc)? [I am a PHP user mainly.]
2. Are their any tutorials anywhere relating to this type of thing?
3. Where would I start?

[scragar]

I should think PHP and javascript could generate the effect quite nicely, the image will have to be uploaded first, since that is the most important part of the operation, and the browsers security model might interfere otherwise.

Look for the image upload script at the top of the PHP forums for a basic idea of how that should work.

The javascript for highlighting a portion of the image is more complicated, but still not too hard to understand(although compensating for IE makes things harder still):

var dragObj = {};// for storing info
var previousBoxes = [];// ignore for now
var box = newBox();

function newBox(){// create and return a new box
  var box = document.createElement('div');// make a new div to draw
  box.style.display = 'none';// default to invisible
  box.style.border = 'solid black 2px';// change
  box.style.position = 'absolute';
  box.appendChild(document.createTextNode(' '));
  box.style.height = box.style.left = box.style.top = box.style.width = '0';
  document.body.appendChild(box);// add box to page
  return box;
}

function dragStart(e){
  if(window.event)
    dragObj.elNode = window.event.srcElement;
  else
     dragObj.elNode = e.target;

  if(dragObj.elNode.nodeType == 3)// make sure we only move elements
    dragObj.elNode = dragObj.elNode.parentNode;

  if(window.event){// get the XY co-ords of where we start the box
    dragObj.cursorStartX = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
    dragObj.cursorStartY = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
  }else{
    dragObj.cursorStartX = e.clientX + window.scrollX;
    dragObj.cursorStartY = e.clientY + window.scrollY;
  }

  box.style.display = 'block';// show the box
  box.style.left = dragObj.cursorStartX+'px';
  box.style.right = dragObj.cursorStartY+'px';

  if(document.attachEvent){// add our drag and release functions
     document.attachEvent("onmousemove", dragGo);
     document.attachEvent("onmouseup", dragStop);
     window.event.cancelBubble = true;
     window.event.returnValue = false;
  }else{
      document.addEventListener("mousemove", dragGo, true);
      document.addEventListener("mouseup", dragStop, true);
      event.preventDefault();
  }
}

function dragGo(event){// this is a temp function, it needs some work :p
  var x, y;

  if(window.event){
    x = window.event.clientX + document.documentElement.scrollLeft
+ document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
+ document.body.scrollTop;
  }else{
     x = event.clientX + window.scrollX;
     y = event.clientY + window.scrollY;
  }

  // Position the box.
  if(x > dragObj.cursorStartX){
    box.style.left = dragObj.cursorStartX+'px';
    box.style.width = (x - dragObj.cursorStartX) + 'px';
  }else{
    box.style.left = x+'px';
    box.style.width = (dragObj.cursorStartX - x) + 'px';
  }
  if(y > dragObj.cursorStartY){
    box.style.top = dragObj.cursorStartY+'px';
    box.style.height = (y - dragObj.cursorStartY) + 'px';
  }else{
    box.style.top = y+'px';
    box.style.height = (dragObj.cursorStartY - y) + 'px';
  }
  // all done
  if(window.event){
    window.event.cancelBubble = true;
    window.event.returnValue = false;
  }else
     event.preventDefault();
}

function dragStop(event){
  if(window.event){
    document.detachEvent("onmousemove", dragGo);
    document.detachEvent("onmouseup", dragStop);
  }else{
    document.removeEventListener("mousemove", dragGo, true);
    document.removeEventListener("mouseup", dragStop, true);
  }
// store reference to old box
  previousBoxes[previousBoxes.length] = box;
// create a new box for later
  box = newBox();
// add something here to cover anything else needed, like a notes box or whatever.
}