How to get all images from HTML control in Flex? - html

Question

I have a HTML control in Flex that succefully loads a page.
Is there someway that i can extract or get all the images from that HTML control and show them?

Answer 1

You can actually use the HTML document DOM and ask about all img tags. It's a lot cleaner this way.
Once you get the DOM it's all standard so you can check HTML DOM documentation if you're unsure about something.
Here's quick example. I'll just write the onComplete function, as it would be called in Taurayi's example
var _imagesSrc:Array= [];
private function onComplete(e:Event):void
{
var htmlLoader:HTMLLoader = e.target as HTMLLoader;
var doc:* = htmlLoader.window.document; //use void (*) type for DOM objects
var imgTags:* = doc.getElementsByTagName("img");
if(imgTags)
{
for(var i:int=0;i<imgTags.length;i++)
{
var src:* = imgTags[i].getAttribute("src"); //not sure about return type here, could also be a String
if(src)
_imagesSrc.push(src.toString());
}
}
}

Answer 2

Well an idea would be that you load the html page using HTMLLoader and then when it has loaded you get the source. Then using a parser or regex you would extract the values of the src attributes of the <img /> tags. The values of the src attributes will be the urls to the images on the page you loaded. Then using Loader and said urls, you would load them into your flash application.
Here's an example:
Main.as(document class):
package
{
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
import flash.html.HTMLLoader;
import flash.net.URLRequest;
public class Main extends Sprite
{
public function Main():void
{
var htmlLoader:HTMLLoader = new HTMLLoader();
htmlLoader.addEventListener(Event.COMPLETE, onComplete);
htmlLoader.width = stage.stageWidth;
htmlLoader.height = stage.stageHeight;
htmlLoader.load(new URLRequest("http://www.wampserver.com/"));
}// end function
private function onComplete(e:Event):void
{
var htmlLoader:HTMLLoader = e.target as HTMLLoader;
var body:String = htmlLoader.window.document.body.outerHTML;
var imgTags:Array = getImgTags(body);
var src:String = getSrc(imgTags[1]);
trace(src); // output: http://www.wampserver.com/wp-content/themes/wampserver/img/home-title.png
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
loader.load(new URLRequest(src));
}// end function
private function onLoaderComplete(e:Event):void
{
var loader:Loader = (e.target as LoaderInfo).loader;
addChild(loader);
}// end function
private function getImgTags(source:String):Array
{
return source.match(/(<img.*?>)/g);
}// end function
private function getSrc(imgTag:String):String
{
return imgTag.match(/src="(.*?)"/)[1];
}// end function
}// end class
}// end package
Keep in mind this is just an idea, there are some obvious flaws.