Problem with image scaling

[siberianbearr]

I came across two problems while working with the library:

1. If the image is bigger than the max OpenGL texture size(which is different depending on the device), the image won't be shown. I had this problem before when trying to display a large image in an ImageView. This is less a problem with the library but with Android itself, but nonetheless the library could handle that. My solution was to simply scale the image down to 2048px, this should work on most devices.

public static Bitmap transformBitmapTo2048px(Bitmap source){
        if(source.getHeight() <= 2048 && source.getWidth() <= 2048)
            return source;

        int targetWidth;
        int targetHeight;

        double aspectRatio = (double) source.getHeight() / (double) source.getWidth();

        if(source.getWidth() >= source.getHeight()){
            targetWidth = 2048;
            targetHeight = (int)(2048 * aspectRatio);
        } else {
            targetHeight = 2048;
            targetWidth = (int)(2048 / aspectRatio);
        }

        Bitmap result = Bitmap.createScaledBitmap(source, targetWidth, targetHeight, false);
        if (result != source) {
            // Same bitmap is returned if sizes are the same
            source.recycle();
        }
        return result;
}

2. The current implementation for editing an image works basically by doing the image processing on the screen and the taking the contents of that to save the image. The problem with that is that the image get scaled down, possibly a lot. For example, if you have a picture in landscape, it will be scaled down quite a lot to fit into the ImageView. In my case, the PhotoEditorView fits the whole screen, so if I save the image, it will be exactly the size of my screen, and the actual (landscape) image is only a small part of that image.
   The correct approach would be to have an internal representation of the image and do all the processing on that. This would allow to keep the original size of the image (you can still show the image scaled down to fix problem 1).

[burhanrashid52]

Thanks @siberianbearr for detail analysis. Can you suggest some idea/logic how to implement this by keeping ImageView in internal representation ?

[gotamafandy]

hi @burhanrashid52 , you can check this repo https://github.com/siwangqishiq/ImageEditor-Android
this is not mine :), however they have pretty good job scaling sticker and text to real resolution image using matrix transformation.

While the project is in chinese, some part of the demo contain english translations.

[gotamafandy]

hi @burhanrashid52 i've done some quick combination between your project and https://github.com/siwangqishiq/ImageEditor-Android so that i can save a big resolution image with stickers. Check it out at:
https://github.com/fandygotama-tokobagus/PhotoEditor, please note that this is not 100% done as the project still missing some feature like e.g.: undo/redo brush, typeface and other things :)

[sepehr1014]

This seems like a real deal-breaker. Any progress on this issue @burhanrashid52 ?

[burhanrashid52]

Nop @sepehr1014 I have labelled as help wanted. @fandygotama-tokobagus Did you resolve this issue?

[nguyenngoclinhbkhn]

@burhanrashid52 i think whether can we draw sticker on orignal bitmap ?

[gotamafandy]

hi @burhanrashid52 , sorry i didn't get your mention since i changed my github username :(. I haven't gotten chance to finish the project, however the calculation already done on my repo and its working, you can save the real image with sticker on it. I will find some time to finish the project and do PR

[burhanrashid52]

@gotamafandy I was looking for someone to fix this. I am waiting for your PR.

[mianaliasjad]

Guys any update on this issue?
i checked your library and what i understand is that you take the view and convert it into bitmap and save it.
That's why actual image quality drops down.
i thought one solution for it:
What if we keep the original image bitmap as a backup and then perform all operations on image view container and when click save button. Then convert all the added stickers and text into bitmap and then draw those bitmaps on orignal bitmap. In this way, the quality will not decrease i already tried it. But the problem is how do we re-position those texts and emojis on the original bitmap? As original bitmap has different resolution and the one on which user entered emojis and text was of different size.

[sinhpn92]

Hummm... This issue is very important for photo editor. But Maybe We need native to implements this feature. Have anyone help?

[KimiChiu]

How about using a custom draw to scale down the imageView display size, so we are still painting on the full size.
I found a implementation here.
https://stackoverflow.com/questions/12169905/zoom-and-panning-imageview-android

[burhanrashid52]

How about using a custom draw to scale down the imageView display size, so we are still painting on the full size.
I found a implementation here.
https://stackoverflow.com/questions/12169905/zoom-and-panning-imageview-android

Where you able to make it work ? @KimiChiu

[KimiChiu]

How about using a custom draw to scale down the imageView display size, so we are still painting on the full size.
I found a implementation here.
https://stackoverflow.com/questions/12169905/zoom-and-panning-imageview-android

Are you able to make it work ? @KimiChiu

It depends, I have 7 ongoing projects.
it's an easier way to start.
I tried a workaround which is to put a HorizontalScrollView as a parent but had no luck.

[brittle123]

@burhanrashid52 Please sir add crop feature in your repository ASAP just like in https://github.com/siwangqishiq/ImageEditor-Android

[EbelloImbox]

Is this problem solved in new version 2.0.0?

[burhanrashid52]

No. Scaling the image is a hard problem to solve. The 2.0.0 version is just a Kotlin conversation.

[Lolboer9999999]

this worked for me https://github.com/tauseefrehman2/pinch-to-zoom-linear-layout
(when using a big image it puts it half of screen for some reason though, and when zooming if you release the finger you touched the screen first with first it jumps cuz it mixes up your fingers or something so if anyone knows how to fix that that would be great)
edit: i changed a few things and now it works perfectly

[iMJ007]

Here is my suggestion for preventing downscaling of images (which I successfully got working):

1. Wrap the photoeditorview inside a horizontal scroll view with height&width wrap content
2. setScaleX and setScaleY on photoViewEditor view with scale factor according to your needs
3. calculate and set the amount of scroll needed to center the view and disable touch interception on scrollview

Since this library is generating bitmaps from displayed views itself, then manipulating views seems the only solution (TO ME) without drastically changing the underlying library code. Since the library is migrated to kotlin, I could not try and implement changes in the library itself as I am yet to learn kotlin 😢

[burhanrashid52]

Here is my suggestion for preventing downscaling of images (which I successfully got working):

1. Wrap the photoeditorview inside a horizontal scroll view with height&width wrap content

2. setScaleX and setScaleY on photoViewEditor view with scale factor according to your needs

3. calculate and set the amount of scroll needed to center the view and disable touch interception on scrollview

Since this library is generating bitmaps from displayed views itself, then manipulating views seems the only solution (TO ME) without drastically changing the underlying library code. Since the library is migrated to kotlin, I could not try and implement changes in the library itself as I am yet to learn kotlin 😢

Jave is interop with Kotlin. So you can create a separate class in Java where this scaling logic resides and return back the scaled image to the Kotlin method by delegating it to the java method. Then we can convert the Java class to Kotlin if more logic is required in the future.

[ishazahid]

PhotoEditor.getEmojis(getActivity()); i dont get this method getEmojis()
plz help me how to resolve this