5 Replies Latest reply on May 15, 2009 4:02 AM by kmanios

    Printing image with mask in Adobe Air

    kmanios

      I have createad an application for framed photos.This application creates a Canvas which can hold several framed photos. Following is the code of the framed photo:

       

      <mx:Canvas id="imageContainer" horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false">
              <mx:Image id="image_img" source="app:/image.jpg" maintainAspectRatio="false" width="500" height="500" cacheAsBitmap="true"/>
              <mx:Image id="mask_img" source="app:/mask.png" maintainAspectRatio="false" width="300" height="300" cacheAsBitmap="true"/>
              <mx:Image id="frame_img" source="app:/frame.png" maintainAspectRatio="false" width="300" height="300" cacheAsBitmap="true"/>
      </mx:Canvas>

       

      when these are loaded, I use:

       

      image_img.mask = mask_img;

       

      to apply the mask on the image. this looks fine on the screen, but when I try to print it the mask is not applied!

      Actually I have found two ways to do this. The first is to add the Canvas directly to a print job:

       

           var printOption:PrintJobOptions = new PrintJobOptions();
           printOption.printAsBitmap = true;
           myPrintJob.addPage(frameContainer, null, printOption);

           myPrintJob.send();

       

      this has a very good print quality but the masks do not work.

      the second way is to take a "screenshot" in a bitmap and print that:

       

           var previewBD:BitmapData = new BitmapData( frameCanvas.width, frameCanvas.height, false );
           previewBD.draw( frameCanvas, null, null, null, null, true );
           var b:Bitmap = new Bitmap;
           b.bitmapData = previewBD;
           var s:Sprite = new Sprite;
           s.addChild(b);

           myPrintJob.addPage(s, null, printOption);

       

      in this case the mask works but the print quality drops drastically!

      is there any way to print with good quality AND having the mask?

      is this a bug of AIR or am I missing something?

        • 1. Re: Printing image with mask in Adobe Air
          Jeff Swartz Level 3

          Your PrintJob.addPage() call references an object named frameContainer. But I don't see it in your MXML code. Do you want to print the imageContainer object?

          • 2. Re: Printing image with mask in Adobe Air
            kmanios Level 1

            sorry I thought I had mentioned it, the frameContainer is the Canvas that holds all the framed photos.

             

                <mx:Canvas id="frameCanvas" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#FFFFFF" backgroundAlpha="0.01" />

             

            the framed photos are created as separate objects and then added to the frameCanvas as children:

             

                            var newFrame:PhotoFrame  = new PhotoFrame( );
                            frameCanvas.addChild( newFrame );

             

            the "imageContainer" code in the first post, is essentially the code of the PhotoFrame file.

            Would it help to send more info/files?

            • 3. Re: Printing image with mask in Adobe Air
              kmanios Level 1

              here is the full code of the PhotoFrame file. (the mxml of which I sent in my first post)

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init( )"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false">
                 
                  <mx:Script>
                      <![CDATA[
                          import mx.controls.*;
                         
                          /**
                           * Initialize
                           */
                          private function init( ) : void
                          {
                              image_img.mask = mask_img;
                          }
                      ]]>
                  </mx:Script>
                  <mx:Canvas id="imageContainer" horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false">
                      <mx:Image id="image_img" source="app:/image.jpg" maintainAspectRatio="false" width="500" height="500" cacheAsBitmap="true"/>
                      <mx:Image id="mask_img" source="app:/mask.png" maintainAspectRatio="false" width="300" height="300" cacheAsBitmap="true"/>
                      <mx:Image id="frame_img" source="app:/frame.png" maintainAspectRatio="false" width="300" height="300" cacheAsBitmap="true"/>
                  </mx:Canvas>
              </mx:Canvas>

               

              and this is the full code of the main application file. in the printing I have commented out the bitmap printing part which has low quality.

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:WindowedApplication
                  xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="absolute" showFlexChrome="false" visible="true"
                  applicationComplete="init( )"
                  horizontalScrollPolicy="off" verticalScrollPolicy="off"
                  usePreloader="false" >

               

                  <mx:Script>
                      <![CDATA[
                         
                          import mx.controls.*;
                         
                          private function init( ) : void
                          {
                              nativeWindow.maximize( );
                              var newFrame:PhotoFrame = new PhotoFrame( );
                              frameCanvas.addChild( newFrame );
                          }
                         
                          private function printMe( ) : void
                          {
                              var myPrintJob:PrintJob = new flash.printing.PrintJob;
                              if(myPrintJob.start()) {
                                  // Create the options
                                  var printOption:PrintJobOptions = new PrintJobOptions();
                                  printOption.printAsBitmap = true;
                                 
                                  try {
                                      // This has a mask but prints in low quality
              /*                        var previewBD:BitmapData = new BitmapData( frameCanvas.width, frameCanvas.height, false );
                                      previewBD.draw( frameCanvas, null, null, null, null, true );
                                      var b:Bitmap = new Bitmap;
                                      b.bitmapData = previewBD;
                                      var s:Sprite = new Sprite;
                                      s.addChild(b);
                                      myPrintJob.addPage(s, null, printOption);
              */                       
                                      // This prints in desired quality but the mask does not work.
                                      myPrintJob.addPage(frameCanvas, null, printOption);
                                  }
                                  catch(e:Error) {
                                      Alert.show("Printing canceled");
                                  }
                                  myPrintJob.send();
                               }
                          }
                      ]]>
                  </mx:Script>
                 
                  <!--Frame Canvas-->
                  <mx:Canvas id="frameCanvas" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" backgroundColor="#FFFFFF" backgroundAlpha="0.01" />
                  <mx:Button top="400" left="200" label="Print" click="printMe()"/>
              </mx:WindowedApplication>

               

               

              Note: I also tried printing the newFrame directly instead of the frameCanvas, but the mask is still missing.

               

              finally I attach the three images used so that you can have the full project.

              • 4. Re: Printing image with mask in Adobe Air
                Jeff Swartz Level 3

                Things work if you set printOption.printAsBitmap to false (not true), and set cacheAsBitmap to "false" for the Image components:

                 

                    <mx:Canvas id="imageContainer" horizontalScrollPolicy="off" verticalScrollPolicy="off" clipContent="false">
                        <mx:Image id="image_img" source="app:/image.jpg" maintainAspectRatio="false" width="500" height="500" cacheAsBitmap="false" x="25" y="25"/>
                        <mx:Image id="mask_img" source="app:/mask.jpg" maintainAspectRatio="false" width="300" height="300" cacheAsBitmap="false" x="120" y="120"/>
                        <mx:Image id="frame_img" source="app:/frame.png" maintainAspectRatio="false" width="550" height="550" cacheAsBitmap="false"/>
                    </mx:Canvas>
                </mx:Canvas>

                 

                (Not that I modified the width, height, x, and y properties of these a bit.)

                 

                Does that produce desired results for you?

                1 person found this helpful
                • 5. Re: Printing image with mask in Adobe Air
                  kmanios Level 1

                  it seems that if I do this the image is cropped to 300x300 which is the mask image size and not according to the actual mask.

                  The image should be cropped according to the transparency in the mask image, which can have any shape as well as semi-transparency.

                  Do you have any more ideas? maybe if I change the mask format or something?

                   

                  I attach one more frame-mask set which should display better the problem as it contains a more complex mask.