Javascript + ActionScript : How to convert bytearray returned from Actionscript to image in Javascript

Question

我通过 ExternalInterface 调用将字节数组从 ActionScript 返回到 Javascript。现在，我必须将这个 byteaarray 转换为 Javascript 代码中的图像。请帮助...任何示例代码...

提前致谢...

Answer 1

我看到了这个问题的两个可能的解决方案，我都没有测试过，所以尝试一下:

HTML5 Canvas

首先，使用 ActionScript 将您的字节数组转换为整数数组。您将需要四个值:

• 红色
• 绿色
• 蓝色
• 阿尔法

将其传输到 Javascript，使用字符串表示或纯数字，然后将这些数字加载到 Canvas 中:

var canvasData = ; // data from actionscript
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.width*imgData.height*4;i+=4)
{
  imgData.data[i+0]=canvasData[i][0]; // red
  imgData.data[i+1]=canvasData[i][1]; // green
  imgData.data[i+2]=canvasData[i][2]; // blue
  imgData.data[i+3]=canvasData[i][3]; // alpha
}
ctx.putImageData(imgData,10,10);

通过 CSS 进行 Base64 编码

如果您不想依赖 HTML5，请使用 ActionScript 将字节数组转换为 base64 字符串，然后使用以下 css 规则插入图像:

background-image: url(data:image/png;base64,__base64_data__);

并将 __base64_data__ 替换为生成的字符串。这可以使用 JQuery 动态完成:

$('#img').css("background-image", "url(data:image/png;base64,__base64_data__)"); 

这似乎也是一种比 HTML5 Canvas 更有效的方法，尽管实际性能将取决于图像大小。