How to Get Image From <img src=""> Tag? - html

Question

When I want to render a picture, I send a request to the server with the associated picture to render. What's odd is how it's returned:
<img src="https://blargh.com/displayTemplate?templateid=template1">
Where that link is supposed to be the image data.
Using this, how can I transform that into an image that I can display to the user? This is for a facebook app, I can't just embed the HTML. It needs to be displayed inside my AS App as a Bitmap or Sprite or anything, really. Trying to convert it to a Bitmap or BitmapData have failed...
The only other information I can give is that my templateLoader is a Loaderand its .data is supposed to carry the HTML.

Answer 1

Something like this:
var data:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">';
// grab the src attribute
var url:Array = data.match(/<img src=\"(.*?)\">/);
if (url.length > 1){
var loader:Loader = new Loader();
loader.load(new URLRequest(url[1]));
addChild(loader);
}

Answer 2

Use e4x. I'm not sure if you're getting a string or the result format on your service call is already XML, but if it's a string, you'd do something like this:
var imgXML:XML = XML(yourString);//yourString contains <img src="https://blargh.com/displayTemplate?templateid=template1">
link = imgXML.#src;
Then, look at the code Zevan posted for how to use a Loader if you're using just AS, or use it as the source for an Image control in Flex.

Answer 3

Looks like the server is providing you with a link that dynamically looks up the image based on the GET data you're passing to the server (the ?templateid=template1). Too bad you didn't paste in the real link so that this theory could be proven. Take the real link and copy out the http:// portion, enter it into your browser and if the image appears then this is indeed the case.
If this is true, then you want to extract the link from the tag. You could do this with a regular expression, like so:
/\?)"(.?)"(.*)/
If you ran that regex against the full tag like you've provided above, then capture group 2 will contain just the HTTP link. You can then use a Loader object to fetch the image so you're actually downloading and presenting the binary image data instead of embedding HTML.
If you're going to be using Regex in AS3, then you absolutely must have the RegExr tool by grantskinner.com: http://gskinner.com/RegExr/desktop/.
Also, to get the data from capture group 2 we do this:
var imageTag:String = '<img src="https://blargh.com/displayTemplate?templateid=template1">'
var myHttpRegex:Regex = /\<img(.*?)"(.*?)"(.*)/;
var result:Object;
result = myHttpRegex.exec(imageTag);
if(result != null) {
var imgUrl:String = result[1];
}
Code is untested, but the concept is there.