www.webdeveloper.com
Results 1 to 3 of 3

Thread: Image annotation before upload?

Hybrid View

  1. #1
    Join Date
    Jul 2004
    Posts
    53

    Cool Image annotation before upload?

    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?

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    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):
    PHP Code:
    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"dragGotrue);
          
    document.addEventListener("mouseup"dragStoptrue);
          
    event.preventDefault();
      }
    }

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

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

      
    // Position the box.
      
    if(dragObj.cursorStartX){
        
    box.style.left dragObj.cursorStartX+'px';
        
    box.style.width = (dragObj.cursorStartX) + 'px';
      }else{
        
    box.style.left x+'px';
        
    box.style.width = (dragObj.cursorStartX x) + 'px';
      }
      if(
    dragObj.cursorStartY){
        
    box.style.top dragObj.cursorStartY+'px';
        
    box.style.height = (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"dragGotrue);
        
    document.removeEventListener("mouseup"dragStoptrue);
      }
    // 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.


  3. #3
    Join Date
    Jun 2013
    Posts
    37
    If you want your users to add annotation to the image before upload, I recommend you to offer them a windows annotation adding tool, which means the users can add and create any wanted annotation object to the image on windows systems but not within the web page using PHP and javascript controls, which are a little diffic

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles