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):


Browse to the photo
Confirm that photo
Use drawing tools (either basic boxes or, ideally, a basic MS Paint-style paint brush system
Add a note to the drawing
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:


Which technology should I use for this (Flash, Flex, AIR, Silverlight, JavaScript etc)? [I am a PHP user mainly.]
Are their any tutorials anywhere relating to this type of thing?
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.
}