Question

I am creating this “drawing application”, where the user can click “preview” and it will take what they made, draw a bitmap, and then I want to split that bitmap into left and right images. I create the first bitmap, encode it as a jpeg, and then use that to cut the left and right out using copypixels. I then reform the images together with a space inbetween in one canvas, and draw that canvas. Everything works fine up there.

When I go to encode the new bitmap, and then offer it to save out, the saved image is blank. I have tested everything up to that point and it all works fine. I see the images on screen, I can save out the first bitmap fine.. but the second one is always blank. Here is some sample code, possibly someone can help me out.

_mainBmd = new BitmapData(_jacketWidth, _jacketHeight);
_mainBmd.draw(_imageHolder);
startEncode(_mainBmd);


private function startEncode(imageBitmapData:BitmapData):void 
        {
            var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
            encoder.PixelsPerIteration = 150;
            encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encodeDone);

            encoder.encode(imageBitmapData);


        }

private function encodeDone(event:JPEGAsyncCompleteEvent):void
        {

_leftBmd = new BitmapData(sideWidth, sideHeight);
            var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
            var lPoint:Point = new Point(0,0);
            _leftBmd.copyPixels(_mainBmd, lRect, lPoint);


            _rightBmd = new BitmapData(sideWidth, sideHeight);
            var bWidth:Number = 200;
            var sWidth:Number = 111;
            var rRectWidth:Number = (bWidth/2 + sWidth) *  Constants.print_dpi;
            var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
            var rPoint:Point = new Point(0, 0);
            _rightBmd.copyPixels(_mainBmd, rRect, rPoint);

var lbm:Bitmap = new Bitmap(_leftBmd);
            var rbm:Bitmap = new Bitmap(_rightBmd);

            //now combine the two images into one holder with a space in the middle 


            //left Image
            var l_Image:Image = new Image();
            l_Image.source = lbm;

            //right image
            var r_Image:Image = new Image();
            r_Image.source = rbm;

var newRender:Canvas = new Canvas();
            newRender.clipContent = false;
            newRender.minHeight = 0;
            newRender.minWidth = 0;

            newRender.addChild(l_Image);
            r_Image.x = 500;
            newRender.addChild(r_Image);

fcBMD = new BitmapData(renderW, renderH);
            fcBMD.draw(newRender);

startEncode2(fcBMD);


}

private function startEncode2(imageBitmapData:BitmapData):void 
        {
            var encoder:JPEGAsyncEncoder = new JPEGAsyncEncoder(100);
            encoder.PixelsPerIteration = 150;
            encoder.addEventListener(JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, encode2Done);

            encoder.encode(imageBitmapData);


        }

private function encode2Done(event:JPEGAsyncCompleteEvent):void
        {
            _data  = event.ImageData;


        }

private function onSaveRenderClick(e:MouseEvent):void  //save button listener
        {
            var fileRef:FileReference = new FileReference();
            fileRef.addEventListener(Event.SELECT, onSaveComplete);
            fileRef.save(_data, 'testImage.jpg');
        }

Answer 1

Is there a special reason why you go trough all the loops of creating a Canvas holder and adding Images?

Why not use copyPixels directly on the final BitmapData that you want to encode:

var backgroundColor:uint = 0xffffff;
fcBMD = new BitmapData(renderW, renderH, false, backgroundColor);

var lPoint:Point = new Point(0,0);
var lRect:Rectangle = new Rectangle(0,0, sideWidth, sideHeight);
fcBMD.copyPixels(_mainBmd, lRect, lPoint);

var rRect:Rectangle = new Rectangle(rRectWidth, 0, sideWidth, sideHeight);
var rPoint:Point = new Point(renderW - sideWidth, 0);
fcBMD.copyPixels(_mainBmd, rRect, rPoint);

startEncode2(fcBMD);