CODEWITHSUNDEEP
imagecodenameone
Juan Federico Fuld
Juan Federico Fuld

Reputation: 149

CodeName One - Image gets pixelated when scaling

I am getting an image dynamically from a webservice. Afterwards I am supposed to use it as background for the upper half of the screen. My problem is that I only get one size of the image (which should be approximately right for many smartphones phones) but when I resize it to make it fill half of the screen it gets pixelated. I have tried putting it as background of a container (adding padding to the expected size) and using BACKGROUND_IMAGE_SCALED_FILL and/or using Image methods scaledHeight/scaledWidth, fill and scaled. It doesn't matter if I scale it to a bigger or smaller size it still deteriorates noticeably.

Is this to be expected? Is there another way to scale images?

public class CopyOfVistaPantallaPrincipal extends VistaDisparaEventos {

    private Container canvasPantallaPrincipal;

    public CopyOfVistaPantallaPrincipal() {
        canvasPantallaPrincipal = new Container();
        canvasPantallaPrincipal.setName("canvasPantallaPrincipal");
        super.canvas = this.canvasPantallaPrincipal;
        initPantallaPrincipal();
    }

    private void initPantallaPrincipal() {

        canvasPantallaPrincipal.setLayout(new LayeredLayout());
        canvasPantallaPrincipal.getUnselectedStyle().setBgTransparency(0);

        ModeloNovedades modelo = new ModeloNovedades();

        Image imgPrincipal = createImagenPrincipal(modelo);
        canvasPantallaPrincipal.setName("canvas pantalla principal");

        Container otro = new Container(new BorderLayout());
        if (imgPrincipal != null) {
            img.getUnselectedStyle().setBorder(null);
            img.getUnselectedStyle().setPadding(0, 0, 0, 0);
            img.getUnselectedStyle().setMargin(0, 0, 0, 0);
            canvasPantallaPrincipal.addComponent(img);
        }
        canvasPantallaPrincipal.addComponent(otro);
    }

    private Container createImagenPrincipal(ModeloNovedades modelo) {
        return loadTopImage(modelo, modelo.getDestacado());
    }

    private Container loadTopImage(ModeloNovedades modelo, Hashtable destacado) {       
        int width = Display.getInstance().getDisplayWidth();
        int imgHeight = (int) ((Display.getInstance().getDisplayHeight() / 2) * 0.95) ;

        //Default image
        Image foregroundImage = FormFactory.loadImage("/imagenPrincipaLogoOld.png");

        if (! modelo.getDestacado().isEmpty()){
            String destacadaURL = "" + destacado.get("imagen");
            if (! destacadaURL.equals("")){
                //After updating it loads the downloaded image here
                byte[] data = (byte[]) DataCenter.getInstance().get(destacadaURL, false);
                foregroundImage = FormFactory.loadImage(data, 100);
            }
         }

        imageContainer.getAllStyles().setPadding(imgHeight/2, imgHeight/2, width/2, width()/2);
        imageContainer.getAllStyles().setBgImage(foregroundImage);
        imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);

        return imageContainer;
    }

}

If I'm not returning the image but a container having it as background I would add it to a Container like this:

imageContainer.getAllStyles().setPadding(imgHeight/2, imgHeight/2, width/2, width/2);
imageContainer.getAllStyles().setBgImage(foregroundImage);
imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED); //only if it was scaled

Original image (please ignore the dark bar over it, it was added recently and I didn't save the previous version, as I said it comes dynamically): http://i68.tinypic.com/16lmeqr.jpg

Scaled: http://i68.tinypic.com/w7zafm.jpg

Cropped: http://i65.tinypic.com/2nkp79l.png

Image as of the last update: http://i68.tinypic.com/2ik7eiq.png

Upvotes: 2

Views: 134

Answers (1)

Shai Almog
Shai Almog

Reputation: 52760

Remove all of your code that manipulates the image, needs scaling, scale etc... That is all redundant. Every pass you do on manipulating an image deteriorates it a little bit...

You need just one line change and you need to do it always so the image will always "fit" without cropping or any other changes: imageContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALE_TO_FILL);

Notice that you can just use ScaleImageLabel instead of image container which does roughly the same thing.

Upvotes: 1

Related Questions