8 Replies Latest reply on Nov 6, 2008 10:38 PM by solidated

    Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>

      I have noticed that the quality of the images produced by the JPEGEncoder does not match that of other encoders available (i.e. php’s built in image compression functions from the gd library)

      Any explanation ? or hints/workarounds for improving the quality of compressed images by JPEGEncoder ??

      Please have a look at the following samples:

      original image:
      Size: 110KB

      Image encoded with JPEGAsync (same effect with JPEGEncoder):

      Image encoded with Php’s built-in functions (gd library):
      Much smoother than the JPEGAsyncencoder and JPEGEncoder version.. and smaller too
        • 1. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
          Joe ... Ward Level 4
          My guess is that the difference has a lot to do with resizing the image. Did you set the Bitmap smoothing property to TRUE before resizing?
          • 2. Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
            seme1 Level 1
            Yes,, I am resizing the image ..

            here is my code,, I thought smoothing was enabled by simply setting
            tmploader[ I ].content.smoothing = true !!

            //new file stream
            var fileStream= new air.FileStream();
            fileStream.open(imageFile, air.FileMode.READ);
            //reading image into bytearray and closing stream
            var imgBytes = new air.ByteArray();
            //creating loader and injecting image bytes into it
            tmploader[ I ]= new air.Loader();
            tmploader[ I ].contentLoaderInfo.addEventListener( air.Event.COMPLETE, function(e){

            tmploader[ I ].loadBytes( imgBytes, air.loaderContext );

            function saveTheFile(){
            // +++++++++++++++++++++++++++++++++++++++++++++++++
            // here is where I had smoothing enabled,, is this the right way ?
            tmploader[ I ].content.smoothing = true;
            tmploader[ I ].content.height =(600/ tmploader .content.width) * tmploader.content.height ;
            tmploader[ I ].content.width =600;

            var bd =new air.BitmapData(600,tmploader .content.height);
            bd.draw(tmploader[ I ],null,null,null,null,true); // 6th parameter is set to true for smoothing
            // ++++++++++++++++++++++++++++++++++++++++++++++++
            var encoder = new window.runtime.com.pfp.utils.JPEGAsyncEncoder(80);
            encoder.PixelsPerIteration = 128;
            window.runtime.com.pfp.events.JPEGAsyncCompleteEvent.JPEGASYNC_COMPLETE, function(e){
            encodeDone(e, lastid, propid);
            tmploader[ I ].unload();

            • 3. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
              Joe ... Ward Level 4
              I tried this in Flex and got the same results. It's definitely the resize that causes the problem, not the JPEG encoder. AFAIK, the smoothing in the BitmapData draw() call is the one that matters, or should matter. I didn't actually see any difference in the output whether it was on or off. Sorry I couldn't be of more help.
              • 4. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
                seme1 Level 1
                Where should I seek a solution ? How can I solve the problem ??
                • 5. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
                  seme1 Level 1
                  still looking for a solution with no luck so far :(
                  • 6. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
                    seme1 Level 1
                    I couldn't find a solution to this so far... And my project is still pending because of this...
                    • 7. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>
                      seme1 Level 1
                      UP,, still no solution so far
                      • 8. Re: Bad quality for JPEG encoded images ,,<***(samples INSIDE)***>

                        Not sure if you got this resolved... If you did, I'd like to hear how you did it, but in case you didn't, I'll tell you what I do. it's a work-around but the results are pretty good. Not great, but better than ok.

                        I do several resizes, each by 50%, with the final resize to the dimensions that I need. For example, lets say my original element is 1024x768 and I'm trying to get to 140x105 for a thumbnail. I'll 0.5 the 1024 to get me to 512 and create a bitmap of that. Then I'll 0.5 the 512 to get me to 256 and create a bitmap of that. Finally I'll 0.546 (140 / 256) the 256 to get me to 140 and create my final bitmap. The results aren't Photoshop quality, but they're much better than going straight to the final dimensions especially if you've got text in there.

                        I hope this helps.

                        //---------------------------------------------------------------------------------------- -------------

                        // Large Image.
                        var imageData:BitmapData = new BitmapData(reference_image_width, reference_image_height, false);
                        imageData.draw(Application(root)[plane_content].cnt_scr_18_grp_0.canvas, null, null, null, reference_image_area, false);

                        // DevNote: !!! IMPORTANT !!! We'll resize the image by 50% twice before we create the thumbnail so the thumbnail comes out smooth.
                        // The First Half-Scale.
                        var half_scale_percent:Number = 0.5;
                        var half_scale_width:Number = reference_image_width * half_scale_percent;
                        var half_scale_height:Number = reference_image_height * half_scale_percent;

                        var half_Matrix:Matrix = new Matrix();
                        half_Matrix.scale(half_scale_percent, half_scale_percent);

                        var firstScaleData:BitmapData = new BitmapData(half_scale_width, half_scale_height, false);
                        firstScaleData.draw(imageData, half_Matrix, null, null, reference_image_area, true);

                        // The Second Half-Scale.
                        half_scale_width = half_scale_width * half_scale_percent;
                        half_scale_height = half_scale_height * half_scale_percent;

                        var secondScaleData:BitmapData = new BitmapData(half_scale_width, half_scale_height, false);
                        secondScaleData.draw(firstScaleData, half_Matrix, null, null, null, true);

                        // Final Image (Thumbnail)
                        var final_scale_percent:Number = style_plane_drg_lst_item_bmp_width / half_scale_width;
                        var final_scale_width:Number = style_plane_drg_lst_item_bmp_width;
                        var final_scale_height:Number = style_plane_drg_lst_item_bmp_height;

                        var final_Matrix:Matrix = new Matrix();
                        final_Matrix.scale(final_scale_percent, final_scale_percent);

                        var thumbData:BitmapData = new BitmapData(final_scale_width, final_scale_height, false);
                        thumbData.draw(secondScaleData, final_Matrix, null, null, null, true);

                        //---------------------------------------------------------------------------------------- -------------