Skip to content

Add high resolution images to your PDF (AlivePDF)

August 28, 2009

With AlivePDF you can create PDF files with Flex. It’s a great library with much options. But how to add images to your PDF? There are 2 basic options you can use to add images to the PDF:

  • Using an embedded JPG or PNG (remember: without transparency)
    myPDF.addImageStream( new EmbeddedImage() as ByteArray, 0, 0, 500, 500, 1, ResizeMode.NONE);
  • Using a DisplayObject from within your application (charts, buttons, vbox’s, etc.)
    myPDF.addImage(DisplayObject, 0, 0, 500, 500, ImageFormat.PNG);

When you add a DisplayObject to the PDF as seen above, it will generate a low resolution ImageSnapshot. But what if you want a high resolution ImageSnapshot of your, let’s say, charts? Then you need to create the ImageSnapshot yourself:

  • By using the JPEGEncoder
    var image:ImageSnapshot = ImageSnapshot.captureImage(DisplayObject, 300, new JPEGEncoder());
  • By using the PNGEncoder
    var image:ImageSnapshot = ImageSnapshot.captureImage(DisplayObject, 300, new PNGEncoder());

This wil return an ImageSnapshot, with a ByteArray in it’s data property (image.data). Now you can add this high quality snapshot to the PDF:

  • myPDF.addImageStream(image.data, 0, 0, image.width, image.height);

Try to avoid the Flex JPGEncoder when you want to encode high resolution images, it will take a long time and block your browser. Instead, use an Asynchronous JPG Encoder as explained (and source code) by Switch on the Code.

Note: when you use PNGEncoder, be aware of DisplayObjects which have transparency. If you want to add a snapshot to the PDF with transparency, it’ll return an error. If anyone has the solution to this problem (high resolution PNG snapshot without transparency), please let me know.

Advertisements
12 Comments leave one →
  1. Dirk permalink
    January 6, 2010 02:17

    Thanks for posting this, huge help!

  2. January 8, 2010 17:34

    When you say “beware of DisplayObjects which have transparency” what do you mean? How can you tell if a display object has transparency? I get that error when capturing a component with a solid white background.

    • January 8, 2010 17:57

      Well. If you capture a component in Flex, don’t ask me why, it includes transparency even when you have a solid background. What you could do to get rid of the transparency, is capture the container of that component. That worked for me, hope it works for you too.

  3. January 8, 2010 21:35

    I finally got this working. After spending countless hours on this over the last couple of days, I figured others may like a more detailed example. I posted a walkthrough at http://agileui.blogspot.com/2010/01/high-resolution-pdfs-from-flex.html

  4. February 9, 2010 20:26

    how do we add a sprite or movieClip in to pdf ?

  5. Chris permalink
    May 20, 2010 21:49

    When using…

    myPDF.addImageStream( new pngBytes() as ByteArray, 0, 0, 500, 500, 1, ResizeMode.NONE);

    How do you get around the following errors?

    1067: Implicit coercion of a value of type int to an unrelated type org.alivepdf.layout.Resize.

    1067: Implicit coercion of a value of type int to an unrelated tyep String.

    1119: Access of possibly undefined property NONE through a reference with static type Class.

    I’ve tried everything and from all different sites, copy and pasting peoples code (which seems to work for them), but I’m getting nowhere

    • Joan permalink
      December 23, 2011 16:50

      Check the source code of PDF.as in AlivePDF, they probably changed the API and it doesn’t take the same parameters as when the tutorial was written.

    • Siddharth permalink
      January 4, 2012 13:23

      I think you are using alive 1.5 API and code signature pointed to Alive 1.4 API. They have changed the signature of addImageStream function. New signature is
      public function addImageStream ( imageBytes:ByteArray, colorSpace:String, resizeMode:Resize=null, x:Number=0, y:Number=0, width:Number=0, height:Number=0, rotation:Number=0, alpha:Number=1, blendMode:String=”Normal”, link:ILink=null ):void

  6. Ani permalink
    August 21, 2012 08:07

    how to add components like panel/vgroup?

  7. Ani permalink
    August 21, 2012 08:34

    i tried the way u have mentioned above to add an display object.. but its giving compile time errors. can u pls share one example??

Trackbacks

  1. New post on Thoughts on Flex « All About The Web
  2. Adding high-res images with AlivePDF | Online Home of Riley Davis

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: