Problem with Jpgencoder and Filereference

Question

I am trying to save the contents of a Movieclip in an image, but when trying to save the image the following error occurs:

image with white space http://www.panrotas.com.br/v2/test.jpg

A white space appears on all images saved using the FileReference together with the JPGEncoder.

I believe the problem is related to JPGEncoder, although I’m not sure that.

Follow the function I use to save the images:

private function fl_Salvar(event:MouseEvent)
        {
            try
            {
                var src:BitmapData = new BitmapData(imageViewer.width,imageViewer.height);


                var mtx:Matrix = DisplayUtils.fitIntoRect(imageViewer.mcImage.getChildAt(0),rect,true,Alignment.MIDDLE,false);

                src.draw(imageViewer,mtx,null,null,null,true);

                var jpgEncoder:JPGEncoder = new JPGEncoder(85);
                var imgStream:ByteArray = null; 
                imgStream = jpgEncoder.encode(src);

                var file:FileReference = new FileReference();
                file.addEventListener( IOErrorEvent.IO_ERROR, ioErrorHandler );
                file.save( imgStream, "TESTE.jpg");
            }
            catch (ioe:IllegalOperationError)
            {
                trace("Operação Ilegal.");
            }
            catch (ae:ArgumentError)
            {
                trace("Argumento Inválido.");
            }
            catch (me:MemoryError)
            {
                trace("Memória Insuficiente.");
            }
            catch (error:Error)
            {
                trace("Erro ao tentar salvar imagem : "
                              + " . Erro : " + error);
            }
        }

        private function ioErrorHandler( event:IOErrorEvent ):void
        {
            trace("Handler de erro I/O: " + event);
        }

I wonder if anyone knows what’s causing this blank area in the images?

Answer 1

Well, I realize you’re using this library, correct?

What I understand is that it cuts out an object DisplayObject, changing its properties and returning to Matrix of this cut. I did some tests here and tried to emulate your error. The closest I got was where I changed the size of the Dimension Rectangle to a number MINOR that my DisplayObject...

Below is the code with error, supposing that my MovieClip (Displayobject) has the size of 300x300px:

var rect:Rectangle = new Rectangle(0, 0, 100, 100);
var matrix:Matrix = DisplayUtils.fitIntoRect(movieclip, rect, true, Alignment.MIDDLE, false);
var bitData:BitmapData = new BitmapData(movieclip.width, movieclip.height);
bitData.draw(movieclip, matrix);

Logically the class Displayutils is decreasing the size of the movieclip (to 100x100), but maintaining the ratio of the final object, which is 300x300px.

When you save this image, it will be saved with the size of 300x300px, but with white spaces both vertical and horizontal.

Now, try to perform this operation by placing the rectangle value exactly equal to the original size of your Movieclip, I believe it will be saved correctly!

I made this code below, just for testing, note that when increasing and decreasing the size of your Rectangle, your final image will be either with blank spaces or missing parts, but when the rectangle size is the same as the movieclip, it will work normally.

var rect:Rectangle = new Rectangle(0, 0, 100, 100);
var matrix:Matrix = DisplayUtils.fitIntoRect(imagem_movieclip, rect, true, Alignment.MIDDLE, false);

function mcToImage(mc:MovieClip):void {

    var bitData:BitmapData = new BitmapData(mc.width, mc.height);
    bitData.draw(mc, matrix);

    var jpge:JPGEncoder = new JPGEncoder(100);

    var ba:ByteArray = jpge.encode(bitData);

    var fileref:FileReference = new FileReference();
    fileref.save(ba, "teste.jpg");

}

mcToImage(imagem_movieclip);