问题描述
|
我正在使用Adobe AIR构建一个应用程序,其中包含带有
mx:HTML
的浏览组件。该浏览器将用于加载外部内容(例如,可公开访问的URL,例如http://google.com),并且在加载外部内容后,我将CSS和JS注入HTMLLoader中以提供其他UI组件我的应用
那部分工作正常。我的JS代码是由WebKit执行的; WebKit使用了我的CSS规则。通过使用CSS和JS创建的UI组件,我想使用一些图像。到目前为止,我已经成功地通过数据URI方案在HTMLLoader中渲染图像,但这迫使我在资产/文件夹中制作了base64编码的图像副本(添加到CSS规则中)。
我希望能够使用HTMLLoader加载外部URL,然后添加CSS,JS和Images在同一HTMLLoader中创建UI组件。我知道HTMLLoader属性placeLoadStringContentInApplicationSandBox,但如果使用该方法将资产/中的本地图像加载到HTMLLoader中,img标签的HTML内容将是什么样,即如何引用该图像?
关于如何将本地图像加载到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元素添加到宽度和高度为300px的外部内容中,但是PNG图像本身未呈现。只需为IMG元素看到一个300px的空白方块即可。
最后更新
答案解决了我的问题,但有一个更改。我使用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,s.bytesAvailable);
var b64Encoder : Base64Encoder = new Base64Encoder;
b64Encoder.encodeBytes(data);
解决方法
为什么在运行时不以base 64编码img?
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);
}
}
}
}
, placeLoadStringContentInApplicationSandbox
不起作用,因为您的内容不是从字符串加载的,而是从外部URL加载的。并且限制了远程内容使用本地文件。如果您加载了html并将其手动设置为htmlText
属性,它将变为本地内容,但这可能会出现问题(例如页面闪烁)。