Scaling larger Image problem.

Question

Hi,

I m developing flex application, in which I want to Draw Image from User local hard-drive to the canvas of size 640x360.

User can choose Image of bigger resolution & is scaled to Canvas size.

But if user selected images of larger resolution like 3000x2000, the scaling take lot time & freezes the application until scale done.

Is there any method to scale image faster or kind of threading can be done?

I am using matrix to scale Image as below:

    var mat:Matrix = new Matrix();
    var scalex:Number = canvasScreen.width/content.width;
    var scaley:Number = canvasScreen.height/content.height;
    mat.scale(scalex,scaley);           

    canvasScreen.graphics.clear();      
    canvasScreen.graphics.beginBitmapFill(content.bitmapData,mat);

Answer 1

Why dont you set the 'scaleContent' property on the Image tag... Images will be scaled to fit into your Image tag.

Answer 2

I think your problem is the use of the Image, I am developing an application that loads images on a canvas and scale them but there works fine for big resolution I will write some code maybe it will help you:

public class ImageObject extend Canvas
{
    public var image :Image;

    ..................
    ..................

    override protected function childrenCreated() : void
    {
        super.childrenCreated();
        addChild( image );
    }

    public function scaleImage():void
    {
        // Caluculate your xVal and yVal here

        var m:Matrix = new Matrix();
        m.scale( xVal, yVal );
        m.concat( image.transform.matrix );

        image.transform.matrix = m;
    }
}

And if you can't add the image as a child to ImageObject you should try making 2 containers for ex:

public class ImageObject extend Canvas
{

public var imageContainer :Canvas;
public var otherContainer :Canvas;

...........................
...........................

override protected function childrenCreated() : void
{
        super.childrenCreated();
        addChild( imageContainer); // add here your image
        addChild( otherContainer ); // here other objects
}