Clever Geek Handbook

Accessing <img> Tag Data

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

+2


source to share


3 answers


This can be done with HTML5 <canvas>

:

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

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

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

  • Copy image to canvas:
    context.drawImage(document.getElementById('your_image_id'),0,0);

  • change as you want: https://developer.mozilla.org/en/Canvas_tutorial

  • get data url:
    canvas.toDataURL()



What is it.

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

+5


source


HTML Parser can help you. This is a free java library, you can use it to browse html pages and search for specific tags to get content. I don't know how this would work in practice as I haven't had a chance to use it yet, but my college recommends it



-1


source 


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

JavaScript:

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


source






More articles:


All Articles