Bypassing 16769025 pixel limit in FP 10-Print

Bypassing 16769025 pixel limit in FP 10 - By: Carson Hager

If you have ever tried to work with large images in Adobe Flex or Adobe Flash, you've likely run into this issue. Back in Flash Player 8/9, you couldn't have a display object larger than 2880x2880. Now, In Flash Player 10, you can create BitmapData objects that are up to 16769025 pixels (be it 4095x4095, 3353805x5, 2048x8191, or any other combination that is less than 16769025 total pixels). This is a huge improvement for working with really large image content. But, what if you want to load an image that contains more than 16769025 pixels, or what if you want to zoom into an image that contains 16769025 pixels?

Here's a trick that you can use to view massive images, zoom in, and even interact with them. Be warned, this only really works well with static images. If you were to try to do this with animations, it would be extremely computationally intensive.

So, we already know about the limitations of BitmapData and Display objects... Did you know that you can actually load images that are larger than 16769025 pixels from a url? However they cannot be displayed onscreen in their native size. Likewise, if you load an image that is less than 16769025 pixels, but stretch/scale it beyond 16769025, then it will also not show up onscreen.

If you load a larger image, or stretch an image so that it is greater than 16769025, you can still perform bitmap manipulations on those object as long as they are not added to the display list. For example, you can still perform bitmapData.draw( source ), where the source is larger than 16769025 pixels, even though the the bitmapData object itself is less than 16769025 pixels. By massaging the manner in which the object is rendererd into the target bitmapData, you can actually render content that you may have otherwise thought was not possible. You can either scale down the image so that the entire content gets displayed, or you can zoom in and only display parts of the image at a time. When zooming in, there really isn't a limit on how big you can zoom into. You can have an image that is 4000x4000, at a 10x scale (which makes it a 40000x40000 visual object), and draw it into the visible area onscreen.

When this happens, we are loading the source content into an mx:Image object, but that object never gets added to the stage. Instead, in the invalidateDisplayList() funciton of my BigImage container, the content from the source image gets rendered into BitmapData objects, then set as the source of another Image object, which actually gets added to the display list. Now, you can't perform a scale and a crop (translate) at the same time on an image that is bigger than 16769025 pixels. If you want to display the content that is beyond the 16769025 pixel limit, you need to first crop the area that will be renderered so that the top left corner of the desired visible area is in the position 0,0 of the BitmapData object that will then be scaled. After it has been cropped, you can draw it into the targeted rendered content BitmapData, so long as the size of that object doesn't exceed the maximum dimensions of a BitmapData object. The translation can be done using a translation operation on a Matrix for the bitmapData.draw operation, and the scaling can be done using a scale operation.

In simplified pseudocode:
matrix.translate( translateX, translateY ); cropper.draw( sourceContent, matrix ); drawSource = new Bitmap( cropper ); scaleMatrix.scale( _scale, _scale ); finalBitmapData.draw( cropped, scaleMatrix, null, null, null, true ); drawSource = new Bitmap( finalBitmapData );

Pushing the limits of the technology is what helps us to continue to drive forward. I hope this will inspire you to push things even further.

Carson Hager is the president and founder of Cynergy Systems, the global leader in Microsoft Silverlight and Adobe Flex development. With a long career in software development, Carson now focuses on developing the next generation of Cynergy leaders who will provide powerful business and consumer applications for companies across nearly every vertical.