How to Add Image to PDF using AlivePDF Flex? - actionscript-3

Question

In below example i am trying to add one bitmap image to pdf in multiple pages.
for small bitmapdata it is working fine. but when it exceeds 8000 pixels it gives error invalid bitmapdata.
Is there any other way to do this.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" minHeight="0">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox width="100%" id="img1" >
<mx:HBox width="100%">
<s:Button click="saveToPDF(event)" label="ExportPDF"/>
</mx:HBox>
<mx:HBox width="100%">
<s:Label width="80" text="Emp Name:"/>
<s:TextInput/>
</mx:HBox>
<mx:HBox width="100%">
<s:Label width="80" text="Emp Code:"/>
<s:TextInput/>
</mx:HBox>
<mx:HBox width="100%">
<s:Label width="80" text="Emp Address:"/>
<s:TextInput/>
</mx:HBox>
<mx:HBox width="100%">
<s:Label width="80" text="Phone No:"/>
<s:TextInput/>
</mx:HBox>
<mx:HBox width="100%">
<s:Label width="80" text="Email Id:"/>
<s:TextInput/>
</mx:HBox>
<mx:DataGrid height="1000" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:Accordion width="100%" height="500">
<s:NavigatorContent label="Accordion Pane 1" width="100%" height="100%">
</s:NavigatorContent>
<s:NavigatorContent label="Accordion Pane 2" width="100%" height="100%">
</s:NavigatorContent>
<s:NavigatorContent label="Accordion Pane 3" width="100%" height="100%">
</s:NavigatorContent>
<s:NavigatorContent label="Accordion Pane 4" width="100%" height="100%">
</s:NavigatorContent>
<s:NavigatorContent label="Accordion Pane 5" width="100%" height="100%">
</s:NavigatorContent>
</mx:Accordion>
<s:Panel height="1000" title="sample panel" width="100%" />
<mx:DataGrid height="1000" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
<mx:DataGridColumn headerText="Column 4" dataField="col4"/>
<mx:DataGridColumn headerText="Column 5" dataField="col5"/>
<mx:DataGridColumn headerText="Column 6" dataField="col6"/>
<mx:DataGridColumn headerText="Column 7" dataField="col7"/>
<mx:DataGridColumn headerText="Column 8" dataField="col8"/>
</mx:columns>
</mx:DataGrid>
<s:Panel height="1000" title="sample panel 2" width="100%" >
<s:Label text="Sample Panel 2" paddingTop="10" fontSize="18"/>
</s:Panel>
<mx:DataGrid height="1200" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Emp no" dataField="col1"/>
<mx:DataGridColumn headerText="Emp Name" dataField="col2"/>
<mx:DataGridColumn headerText="Phone" dataField="col3"/>
<mx:DataGridColumn headerText="Salary" dataField="col4"/>
<mx:DataGridColumn headerText="Email" dataField="col5"/>
</mx:columns>
</mx:DataGrid>
<s:Panel height="1000" title="sample panel 3" width="100%" >
<s:Label text="Sample Panel 3" paddingTop="10" fontSize="24" />
</s:Panel>
<mx:DataGrid height="1200" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="Emp Id" dataField="col1"/>
<mx:DataGridColumn headerText="Designation" dataField="col2"/>
<mx:DataGridColumn headerText="Salary" dataField="col4"/>
<mx:DataGridColumn headerText="Email" dataField="col5"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
<fx:Script>
<![CDATA[
import org.alivepdf.display.Display;
import org.alivepdf.images.ResizeMode;
import org.alivepdf.layout.Orientation;
import org.alivepdf.layout.Size;
import org.alivepdf.layout.Unit;
import org.alivepdf.pdf.PDF;
import org.alivepdf.saving.Method;
protected function saveToPDF(e:MouseEvent):void
{
var singlepageheight:Number=1500;
var totalheight:Number=0;
totalheight=img1.height;
var totalpages:Number=0;
var myPDFEncoder:PDF = new PDF ( Orientation.PORTRAIT, Unit.MM,Size.A4);
myPDFEncoder.setDisplayMode(Display.FULL_PAGE);
myPDFEncoder.addPage();
totalpages=Math.ceil(totalheight/singlepageheight);
for(var i:Number=0;i<totalpages;i++)
{
if(i==0)
{
var bmd:BitmapData = new BitmapData(img1.width, singlepageheight);
bmd.draw(img1, null, null, null, new Rectangle(0, 0, img1.width, singlepageheight));
var bm:Bitmap = new Bitmap(bmd);
myPDFEncoder.addImage(bm,0,24,0,0,'PNG', 100, 1,ResizeMode.FIT_TO_PAGE);
}
else
{
myPDFEncoder.addPage();
var loaderBMD:BitmapData = new BitmapData(img1.width,(i+1)*singlepageheight);
loaderBMD.draw(img1);
var bmd2:BitmapData = new BitmapData(img1.width, singlepageheight, false, 0xFFFFFF);
bmd2.copyPixels(loaderBMD, new Rectangle(0, ((i)*singlepageheight), img1.width,totalheight), new Point(0,0));
var bm1:Bitmap = new Bitmap(bmd2);
myPDFEncoder.addImage(bm1,0,10,0,0,'PNG', 100, 1,ResizeMode.FIT_TO_PAGE);
}
}
var bytes:ByteArray = myPDFEncoder.save(Method.LOCAL);
var fx:FileReference = new FileReference();
fx.save(bytes,"sample.pdf");
}
]]>
</fx:Script>

Answer 1

As per documentation BitmapData cannot exceed more than 8,191 pixels. Here's the excerpt taken directly from the documentation:
In AIR 1.5 and Flash Player 10, the maximum size for a BitmapData
object is 8,191 pixels in width or height, and the total number of
pixels cannot exceed 16,777,215 pixels. (So, if a BitmapData object is
8,191 pixels wide, it can only be 2,048 pixels high.) In Flash Player
9 and earlier and AIR 1.1 and earlier, the limitation is 2,880 pixels
in height and 2,880 in width
Here's the link to the class documentation: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html
I would recommend you use logic to split your viewport into multiple images and then put them in the PDF.
Other way would be to use the built in controls of AlivePDF to create the desired layout you want.
Hope this helps.