Загрузить приложение: / images в HTMLLoader в Adobe Air Flex4.5? - PullRequest
Новая
       54

Загрузить приложение: / images в HTMLLoader в Adobe Air Flex4.5?

1 голос
/ 01 июня 2011

Я создаю приложение с Adobe AIR, которое содержит компонент просмотра с mx:HTML.Этот браузер будет использоваться для загрузки внешнего контента (например, общедоступных URL-адресов, таких как http://google.com,), и после загрузки внешнего контента я добавляю CSS и JS в HTMLLoader для предоставления других компонентов пользовательского интерфейса для моего приложения.

Эта часть работает просто отлично.Мой код JS выполняется WebKit;мои правила CSS используются WebKit.С компонентами пользовательского интерфейса, которые я создаю с помощью CSS и JS, я хотел бы использовать некоторые изображения.До сих пор у меня был успех при рендеринге изображений в HTMLLoader по схеме URI данных , но это вынуждает меня делать копии в кодировке base64 (добавленные в правила CSS) изображений в assets / folder.

Я хотел бы иметь возможность загружать внешние URL-адреса с помощью HTMLLoader, а затем добавлять CSS, JS и изображения для создания компонентов пользовательского интерфейса в том же HTMLLoader.Мне известно о свойстве HTMLLoader placeLoadStringContentInApplicationSandbox, но если это то, что я буду использовать для загрузки локальных изображений из моих активов / в HTMLLoader, как будет выглядеть HTML-содержимое тега IMG, т. Е. Как ссылаться на изображение?

Любые другие идеи о том, как загрузить локальные изображения в содержимое объекта HTMLLoader?

ОБНОВЛЕНИЕ

Я попробовал идею первого комментатора, используя src= "app: /path/to/image.png" без удачи.

Вот что я сделал: 

<mx:HTML id="browser"/> 
<fx:Script>
<![CDATA[
browser.addEventListener(Event.COMPLETE,browserEventCompleteHandler);    
browser.htmlLoader.placeLoadStringContentInApplicationSandbox = true; // have set to true and false with no difference.
....initiate browser load....
private function browserEventCompleteHandler(event:Event):void 
{
    var img:* = browser.domWindow.document.createElement('IMG');
    img.src = "app:/assets/arrow_refresh.png";
    img.width="300";
    img.height="300";
    browser.domWindow.document.getElementsByTagName('body')[0].appendChild(img);
}
]]>
</fx:Script>

Запустив приведенный выше код, я вижу, что добавлен элемент IMGк внешнему контенту с шириной и высотой 300 пикселей, но само изображение PNG не отображается.Просто посмотрите на пустой квадрат 300px для элемента IMG.

FINAL UPDATE

Ответ решил мою проблему, но с одним изменением.Я использовал классы File и FileStream вместо URLRequest для загрузки png.Вот что я сделал: 

var f:File = File.applicationDirectory.resolvePath("app:/assets/arrow_refresh.png");
var s:FileStream = new FileStream();
s.open(f, flash.filesystem.FileMode.READ);
var data:ByteArray = new ByteArray();
s.readBytes(data,0,s.bytesAvailable);
var b64Encoder : Base64Encoder = new Base64Encoder;
b64Encoder.encodeBytes(data);

Ответы [ 2 ]

4 голосов
/ 01 июня 2011

Почему бы не кодировать img в base 64 во время выполнения?

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.html.HTMLLoader;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;

    // Base64Encoder from as3corelib (https://github.com/mikechambers/as3corelib)
    import mx.utils.Base64Encoder;

    public class TestHtml extends Sprite
    {
        private var _htmlLoader : HTMLLoader = new HTMLLoader();

        private var _rawImgLoader : URLLoader = new URLLoader; 

        public function TestHtml()
        {
            super();

            _htmlLoader.width = stage.stageWidth;
            _htmlLoader.height = stage.stageHeight;

            // Load google page
            _htmlLoader.load(new URLRequest("http://www.google.fr"));
            _htmlLoader.addEventListener(Event.COMPLETE,   onEvent);

            // Load one image
            _rawImgLoader.dataFormat = URLLoaderDataFormat.BINARY;
            _rawImgLoader.addEventListener(Event.COMPLETE, onEvent);
            _rawImgLoader.load(new URLRequest("logo.png"));

            addChild(_htmlLoader);
        }

        private function onEvent(e:Event) : void
        {
            addImg();
        }

        private function addImg() : void
        {
            // Wait for img and html
            if(_htmlLoader.loaded && _rawImgLoader.data)
            {
                // Encode img
                var b64Encoder : Base64Encoder = new Base64Encoder;
                b64Encoder.encodeBytes(_rawImgLoader.data);

                var img:Object = _htmlLoader.window.document.createElement('IMG');
                img.src = "data:image/png;base64," + b64Encoder.flush();
                img.width="300";
                img.height="300";
                var body :Object = _htmlLoader.window.document.getElementsByTagName('div');
                body[0].appendChild(img);
            }
        }
    }
}
1 голос
/ 01 июня 2011

placeLoadStringContentInApplicationSandbox не работает, потому что ваш контент загружен не из строки, а из внешнего URL. И удаленный контент ограничен от использования локальных файлов. Если вы загрузили html и установили его вручную в свойство htmlText, он станет локальным, но могут возникнуть проблемы (например, мерцание страницы).

...