I have created a Web Service in C# that delivers thumbnails from SQL Server as byte arrays. It works. In C# I can create a client that will display the images using the web service. I am trying to convert the byte array to a bitmap and use that as the source to a datagrid column with an <mx:Image> in the itemRenderer. I have tryed several different approaches.
Using the web service and displaying text is straight forward and I have no problem there. When I try to use the byte array to create bitmap data and use it in a bitmap object as the source for the <mx:Image> the image is blank. I wonder if this is an encoding or endean issue. I'm not sure if there is a stream object as in C# that can be used without file I/O. I can't see how to use the loader as it requires the result be available in a completion event and therefore limits returning it from a function. Any direction would be appreciated. Here is my code:
<?xml version="1.0" encoding="utf-8"?> <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="requestAllGenre();" width="640" height="480" xmlns:display="flash.display.*">
<mx:ComboBox id="cboGenre" dataProvider="{colGenres}" labelField="GenreDescription" x="254" y="10" width="140"></mx:ComboBox>
<mx:Label x="211" y="12" text="Genre:"/>
<mx:DataGrid x="49.5" y="38" width="541" height="409" id="grdContent" allowMultipleSelection="false" editable="false" enabled="true" resizableColumns="true" showHeaders="true" sortableColumns="false" wordWrap="true" dataProvider="{colContents}">
<mx:columns>
<mx:DataGridColumn headerText="Thumbnail" dataField="ThumbnailByteArray">
<mx:itemRenderer>
<mx:Component id="disp" >
<mx:HBox horizontalAlign="center">
<mx:Image id="img" source="{outerDocument.byteArrayToBitmap(data.ThumbnailByteArray)}" >
</mx:Image>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Title" dataField="ContentName">
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Description" dataField="ContentDescription">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:WebService id="ContentServ" showBusyCursor="true"wsdl="http://localhost:3628/ContentManWebService/ContentServ.asmx?wsdl" >
<mx:operation name="GetAllGenre" resultFormat="object" result="genreResult(event)" >
</mx:operation>
<mx:operation name="GetAllContent" resultFormat="object" result="contentResult(event)" >
</mx:operation>
</mx:WebService>
<mx:Script>
<![CDATA[
import mx.effects.Pause;
import mx.utils.Base64Encoder;
import mx.utils.Base64Decoder;
import mx.core.Application;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.graphics.codec.JPEGEncoder;
import mx.events.FlexEvent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.Event; [
Bindable]
privatevar colGenres:ArrayCollection; [
Bindable]
privatevar colContents:ArrayCollection;
privatevar bmpThumbnail:Bitmap;
privatevar bImageRendered:Boolean;
privatevar nWhileCount:int = 0;
publicfunction byteArrayToBitmap(ba:ByteArray):Bitmap {
var bdatThumb:BitmapData = new BitmapData(75, 95, false); ba.position = 0; bdatThumb.setPixels(
new Rectangle(75, 95),ba);
var bmpThumbnailLocal:Bitmap = new Bitmap(bdatThumb);
return bmpThumbnailLocal }
privatefunction requestAllGenre():void{ ContentServ.GetAllGenre.send(); }
privatefunction requestAllContent():void{ ContentServ.GetAllContent.send(); }
// Gets called when the XML is successfully loaded.
privatefunction genreResult(event:ResultEvent):void{ colGenres = event.result
as ArrayCollection; cboGenre.selectedIndex = 0; }
// Gets called when the XML is successfully loaded.
privatefunction contentResult(event:ResultEvent):void{ colContents = event.result
as ArrayCollection; }
privatefunction btnSearch_OnClick(event:Event):void{ requestAllContent(); } ]]>
</mx:Script>
<mx:Button x="402" y="10" label="Search" id="btnSearch" click="btnSearch_OnClick(event)" toolTip="Click to Find Matching Content"/>