如何高效地将HTML5画布的内容导入到Flash中？

Question

我尝试使用“ExternalInterface.call()”来调用一个返回画布内容的javascript函数。然而，对于一个相对较小的画布（256x256），这非常慢（大约2秒），似乎是由于参数/返回值的编组。即使我像Brad Neuberg在早期帖子中建议的那样将画布数据分解成较小的块，http://codinginparadise.org/weblog/2006/02/how-to-speed-up-flash-8s.html，我仍然得到了较差的性能。无论如何，自Flash 9以来，块的大小都不应该是问题。

我想我还可以尝试覆盖执行参数编组/评估的Flash javascript函数，但这似乎非常复杂，我想知道是否有更简单的方法，在尝试之前先了解一下。

我也尝试过通过以下方式进行flash和javascript通信：

var req : URLRequest = new URLRequest("javascript:getImage()"); 
var loader : Loader = new Loader();
loader.load(req);

其中"getImage()"是JavaScript函数，返回画布内容的图像。但是这会引发一些安全性违规错误，因为没有浏览器脚本允许用作目标URL，除非使用"navigateToURL()"而不是"Loader.load()"函数。不幸的是，前者不返回任何值。

我也看到一些旧代码使用"com.macromedia.javascript.JavaScriptProxy"类，但我没有测试过它，而且在Flash 11中似乎不可用。

任何想法将不胜感激。谢谢！

- elyuro

---

前段时间，我写了一个名为flashcam的程序，用于在Flash中捕获网络摄像头视频，并使用JavaScript在HTML5画布上绘制它。经过一些测试，我最终采用了一个稍微复杂的方案，使用逗号分隔的连续像素差值字符串，编码方式为基数36。请查看代码，反转该过程不应太困难。 - Juan Mellado

@JuanMellado，感谢你的提示。毫无疑问，编码图像数据的方式会产生很大的差异，而字符串是最好的选择，因为最终所有内容都以XML格式传递。我最终使用了PNG压缩+Base64编码，这可以通过canvas函数canvas.toDataURL('image/png')非常高效地完成。与将图像数据作为像素或字节数组传递并在客户端上每个像素调用__flash__toXML()相比，这种方法提高了数倍的性能。也许我应该把这个作为答案发布出来，不确定，我是SO的新手。 - elyuro

好的。是的，请回答自己的问题。 - Juan Mellado

Answer 1

我能想到两个选项：一个简单，一个困难。

1）将其往返发送到服务器。它可能同样慢，但不容易锁定Flash或导致脚本超时。

2）看看是否可以编写一个HTML5 WebSocket，可以连接到Flash的LocalConnection。这并不是小事。这个人似乎已经在C语言中解决了这个问题。他制作了一个可以“说话”的LocalConnection应用程序。

- Matt

---

谢谢您的回复。1）与在浏览器端处理所有内容相比，显然效率更低，在这种情况下不考虑。2）我快速浏览了一下，似乎没有真正的方法可以在JS中进行任何TCP通信。我找到的所有东西要么是在HTTP上模拟TCP，要么是像您提供的链接那样的某种黑客方法。前者的开销类似于ExternalInterface Flash对象，而后者，我甚至无法想象在所有平台上使其工作所需面对的困难。还是感谢您的建议。 - elyuro

Websockets可以通过JS实现，参见此解释http://www.html5rocks.com/en/tutorials/websockets/basics/，但我认为Websockets并不适合您的用例，因为它听起来更像是一次性连接，而不是长时间运行的开放式连接套接字所预期的。 - Eddie