Accessing the <img> tag data

Question

I want to access the tag data so that I can send this image to the server (database) after manipulation using Javascript image processing libraries.

Answer 1

The HTML Parser might help you. It's a free to use java library, You can use it to go through html pages and lookup specific tags to get it's contents. I don't know how it will work in practice since I haven't had the opportunity to use it yet but my college recommends it

Answer 2

<image id="myimage" src="myimage.jpg">

javascript:

function getImage(){
 var imgsrc = document.getElementById('myimage').src;
 alert(imgsrc + ' is the source!');
 return;
}

Answer 3

This can be done with HTML5's <canvas>:

For canvas support in IE: http://me.eae.net/projects/iecanvas/

• create a canvas:
  var canvas = document.createElement('CANVAS'); canvas.setAttribute('width',150);
canvas.setAttribute('height',150);

• get the 2D context:
  var context = canvas.getContext('2d');

• copy the image into the canvas:
  context.drawImage(document.getElementById('your_image_id'),0,0);

• modify as you want: https://developer.mozilla.org/en/Canvas%5Ftutorial

• get the data URL with:
  canvas.toDataURL()

That's it.

Also, look at: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html