问题描述
我建设与Adobe AIR的应用程序，其中包含一个浏览组件与 MX：HTML 。这个浏览器将被用于加载外部内容（如 http://google.com 公开访问的URL，例如）和外部内容加载后，我注射的CSS和JS到HTMLLoader为我的应用程序提供的其他UI组件。
这部分工作得很好。我的JS code由WebKit的执行;我的CSS规则所使用的WebKit的。随着UI组件我创建的CSS和JS，我想已经使用了一些图像。到目前为止，我已经成功通过了数据URI方案渲染图像的HTMLLoader，但这种力量我做出的资产/文件夹的图像的base64恩codeD复制（加入CSS规则）。
我希望能够加载外部URL与HTMLLoader中，然后添加CSS，JS和图像在同一HTMLLoader中创建UI组件。我知道htmlLoader属性，placeLoadStringContentInApplicationSandbox的，但如果我会用什么来从我的资产/成HTMLLoader中，你会的IMG标记一下HTML内容一样，即如何引用图像加载本地图片？
如何加载本地图片到HTMLLoader对象的内容？
任何其他的想法更新
我尝试的第一个评论员的想法，使用SRC =应用程序：/path/to/image.png没有运气
下面是我所做的：
＆LT; MX：HTML的id =浏览器/＆GT;
＆LT; FX：脚本＆GT;
＆LT;！[CDATA [
browser.addEventListener（引发Event.COMPLETE，browserEventCompleteHandler）;
browser.htmlLoader.placeLoadStringContentInApplicationSandbox = TRUE; //设置为true和false没有区别。
....启动浏览器加载....
私有函数browserEventCompleteHandler（事件：事件）：无效
{
VAR IMG：* = browser.domWindow.document.createElement（'IMG'）;
img.src =应用程序：/assets/arrow_refresh.png;
img.width =300;
img.height =300;
browser.domWindow.document.getElementsByTagName（身体）[0] .appendChild（IMG）;
}
]]≥
＆LT; / FX：脚本＆GT;
运行上面code，我看到IMG元素被添加到外部内容与宽度和300px的高度，但PNG图像本身不呈现。刚看到一个空300px的正方形的IMG元素。
最后更新
答案解决我的问题，但有一个变化。我使用File和FileStream类代替的URLRequest加载PNG。这是我做的：
变种F：文件= File.applicationDirectory.resolvePath（应用程序：/assets/arrow_refresh.png）;
变种S：的FileStream =新的FileStream（）;
s.open（F，flash.filesystem.FileMode.READ）;
VAR数据：ByteArray的=新的ByteArray（）;
s.readBytes（数据，0，s.bytesAvailable）;
VAR b64En codeR：Base64En codeR =新Base64En codeR;
b64En coder.en codeBytes（数据）;
为什么不连接code IMG在基地64在运行时？
包
{
进口flash.display.Sprite;
进口对象类型：flash.events.Event;
进口flash.html.HTMLLoader;
进口flash.net.URLLoader;
进口flash.net.URLLoaderDataFormat;
进口flash.net.URLRequest;
// Base64En $ C $从的as3corelib CR（https://github.com/mikechambers/as3corelib）
进口mx.utils.Base64En codeR;
公共类TestHtml扩展Sprite
{
私人VAR _htmlLoader：HTMLLoader对象=新的HTMLLoader（）;
私人VAR _rawImgLoader：的URLLoader =新的URLLoader;
公共职能TestHtml（）
{
超（）;
_htmlLoader.width = stage.stageWidth;
_htmlLoader.height = stage.stageHeight;
//装载谷歌网页
_htmlLoader.load（新的URLRequest（http://www.google.fr））;
_htmlLoader.addEventListener（引发Event.COMPLETE，的onEvent）;
//装入一张图片
_rawImgLoader.dataFormat = URLLoaderDataFormat.BINARY;
_rawImgLoader.addEventListener（引发Event.COMPLETE，的onEvent）;
_rawImgLoader.load（新的URLRequest（为Logo.png））;
的addChild（_htmlLoader）;
}
私有函数的onEvent（五：事件）：无效
{
addImg（）;
}
私有函数addImg（）：无效
{
//等待IMG和HTML
如果（_htmlLoader.loaded＆安培;＆安培; _rawImgLoader.data）
{
// EN code IMG
VAR b64En codeR：Base64En codeR =新Base64En codeR;
b64En coder.en codeBytes（_rawImgLoader.data）;
VAR IMG：对象= _htmlLoader.window.document.createElement（'IMG'）;
img.src =数据：图像/ PNG; BASE64，+ b64En coder.flush（）;
img.width =300;
img.height =300;
VAR体：对象= _htmlLoader.window.document.getElementsByTagName（'格'）;
身体[0] .appendChild（IMG）;
}
}
}
}
I'm building an app with Adobe AIR that contains a browsing component with mx:HTML. This browser will be used to load external content (publicly-accessible URLs like http://google.com, for example) and after the external content loads, I'm injecting CSS and JS into the HTMLLoader to provide other UI components for my app.
That part works just fine. My JS code is executed by WebKit; my CSS rules are used by WebKit. With the UI components I'm creating with CSS and JS, I'd like to have some images used. So far, I have had success with rendering images in HTMLLoader via the data URI scheme, but this forces me to make base64-encoded copies (added to the CSS rules) of images in assets/ folder.
I'd like to be able to load external URLs with HTMLLoader, and then add CSS, JS, and Images to create UI components in the same HTMLLoader. I am aware of the HTMLLoader property, placeLoadStringContentInApplicationSandbox, but if that what I would use to load local images from my assets/ into HTMLLoader, what would the HTML content of an IMG tag look like, ie how to reference the image?
Any other ideas on how to load local images into the content of an HTMLLoader object?
UPDATE
I've tried the first commentator's idea, using src="app:/path/to/image.png" with no luck.
Here's what I did:
<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>
Running the above code, I see that the IMG element is added to the external content with width and height of 300px, but the PNG image itself doesn't render. Just see an empty 300px square for the IMG element.
FINAL UPDATE
The answer solved my problem, but with one change. I used File and FileStream classes instead of URLRequest to load the png. Here's what I did:
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);
Why don't encode img in base 64 at runtime ?
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);
}
}
}
}
这篇关于加载应用程序：/图像转换成的HTMLLoader在Adobe AIR Flex4.5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！