Question

我在Flex中有一个成功加载页面的HTML控件。有什么方法可以从HTML控件中提取或获取所有图像并显示它们吗？

Answer 1

一个想法是你使用HTMLLoader加载html页面，然后当它加载时你获得源。然后使用解析器或正则表达式，您将提取src标记的<img />属性的值。 src属性的值将是您加载的页面上图像的网址。然后使用Loader和所述网址，您可以将它们加载到您的Flash应用程序中。

以下是一个例子：

Main.as（文档类）：

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

请记住，这只是一个想法，有一些明显的缺陷。

Answer 2

您实际上可以使用HTML文档DOM并询问所有img标记。这种方式更加清洁。

一旦获得DOM，它就是标准的，所以如果您不确定某事，可以查看HTML DOM documentation。

这是一个简单的例子。我将只编写onComplete函数，因为它将在Taurayi的例子中调用

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());
        }
     }
}

如何从Flex中获取HTML控件的所有图像？

2 个答案: