Working with Other Components in an Extension

[TIMAI2]

This is what I have so far (not working)

   @SimpleFunction(description = "Get Image and returns base64 string")
    public void GetImageAsBase64(final Image image ) throws Exception {

      final View imageView = image.getView();
      Bitmap imageBitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();

      String encodedString = bitMapToBase64(imageBitmap);    
    }

    public String bitMapToBase64(Bitmap bitMap) {
      ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
      bitMap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
      byte[] byteArray = byteArrayOutputStream.toByteArray();
      return Base64.encodeToString(byteArray, Base64.DEFAULT);
    }

[Kumaraswamy]

Edit: Its actually because you are using View instead of the Image View.

So when you access the Image.getView method, you additionally have to cast it to its ImageView class. The getDrawable method is only on ImageView.

Something like this

final ImageView imageView = (ImageView) imageComponent.getView();
final Bitmap bitmap1 = ((BitmapDrawable) imageView.getDrawable()).getBitmap();

[TIMAI2]

That just gives me more unresolvables

[MohamedTamer]

For the first and second errors resulted in by theImageView symbol, it appears the android.view.ImageView class wasn't imported, importing it should get it fixed.
For the second error, i think the imageComponent variable in @Kumaraswamy's code is equivalent to the image variable in your code, renaming imageComponent to image should work.
The fourth error should be resolved by applying the first fix.

[TIMAI2]

Thank you Mohamed, that clears the errors.

Now need to test.

[TIMAI2]

Success!!

JAVA

import android.graphics.Bitmap;
import android.graphics.drawable.*;
import android.util.Base64;
import android.widget.*;
import com.google.appinventor.components.annotations.SimpleEvent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.runtime.*;
import java.io.ByteArrayOutputStream;


public class ImageBase64 extends AndroidNonvisibleComponent {

    public ImageBase64(ComponentContainer container) {
      super(container.$form());

    }

    @SimpleFunction(description = "Get Image and returns base64 string")
    public void GetImageAsBase64(Image image ) throws Exception {

      final ImageView imageView = (ImageView) image.getView();
      Bitmap imageBitmap = ((BitmapDrawable)imageView.getDrawable()).getBitmap();

      String encodedString = bitMapToBase64(imageBitmap);
      AfterImageBase64(encodedString);
    }

    public String bitMapToBase64(Bitmap bitMap) {
      ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
      bitMap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
      byte[] byteArray = byteArrayOutputStream.toByteArray();
      return Base64.encodeToString(byteArray, Base64.DEFAULT);
    }

    @SimpleEvent(description = "Called after the image is converted. The text argument `imageBase64Data` is the base64 string of the image")
    public void AfterImageBase64(String imageBase64Data) {
      EventDispatcher.dispatchEvent(this, "AfterImageBase64", imageBase64Data);
    }
  }

[TIMAI2]

You will be please to here (if not amazed, given my poor showing so far....) that i have been able to successfully do this part myself:

@TIMAI2

Set an image component with a bitmap, instead of a path to a file.

JAVA

@SimpleFunction(description="Set Image component with image from base64 string")
    public void SetImageFromBase64(final Image image, String base64String) {
        final ImageView imageView = (ImageView) image.getView();
        byte[] decodedString = Base64.decode(base64String, Base64.DEFAULT);
        Bitmap decodedByte = BitmapFactory.decodeByteArray(decodedString, 0, decodedString.length);
        imageView.setImageBitmap(decodedByte);
    }

BLOCKS

SCREENSHOT

A heartfelt thanks to everyone who has participated, I certainly learnt a lot, and hope it has been useful to others too.

Kolb's Learning Styles & Experiential Learning Cycle

[ewpatton]

I'd suggest not doing this via reflection, to be honest. We make no guarantees about whether private methods will be retained release to release. Only the public methods are expected to remain stable. Secondly, in systems where proguard is applied to the final app, the method may be renamed or inlined so reflection will fail.

[TIMAI2]

Could you expand.....perhaps offer alternatives where reflection / private methods have been used ?

[Patryk_F]

Or maybe it's better to add base64 method to all components that display images and that save images? I think it would be an easy project and there would be no backward compatibility issues.

[TIMAI2]

@Patryk_F

all components that display images

Not just images....

There is the soundRecorder and the camCorder too, we could then get carried away and consider the Player and VideoPlayer as well

[Patryk_F]

Can sounds also base64 encoded? I think if someone encodes a long sound file that is a few MBs, could it be resource consuming?

[TIMAI2]

It can be up to 30% bigger, but as long as the device can cope....

See method here by @Juan_Antonio (& me...)

Save image, sound, clip (video), canvas in TinyDB. Extension Base 64. Download file from the web and convert it to string

In this old topic I put an example to take an image with the Cam, convert it to a Base 64 string, save that string in a TinyDB. Read the content of the string from the TinyDB, convert it to a file and display it in an image component. I used the com.KIO4_Base64.aix extension that you can download from: Create Build Crear App Inventor Extensions Añadir librería externa Add lib Extension. @UsesLibraries. Pasar imagen a String y viceversa. Base 64. ![base64_23|690x461] [I, Juan Antonio (@Juan_An…

[Kumaraswamy]

Maybe but, there should be a method for extensions to work with the Canvas?

Edit: I created a small PR here.

[TIMAI2]

@Kumaraswamy

This appears to have stopped working with the last release (n195 or something Google)

@Kumaraswamy

@SimpleFunction(description = "Transfer data from Canvas " +
                    "to an Image Component!")
    public void TransferToImage(final Canvas canvas, final Image image) throws Exception {
        final View canvasView = canvas.getView();
        final Method method = canvasView.getClass()
                .getDeclaredMethod("buildCache");
        method.setAccessible(true);
        Bitmap bitmap = (Bitmap) method.invoke(canvasView);

        ((ImageView) image.getView()).setImageBitmap(bitmap);
    }

My code in extension:

@SimpleFunction(description = "Get Canvas Image and returns base64 string")
  public void GetCanvasImageAsBase64(final Canvas canvas ) throws Exception {
    final View canvasView = (View) canvas.getView();
    final Method method = canvasView.getClass().getDeclaredMethod("buildCache");
    method.setAccessible(true);
    Bitmap imageBitmap = (Bitmap) method.invoke(canvasView);
    String encodedString = bitMapToBase64(imageBitmap);
    AfterCanvasBase64(encodedString);
  }

[Kumaraswamy]

That's why reflection is a bit unstable over time.

@SimpleFunction(description = "Get Canvas Image and returns base64 string")
  public void GetCanvasImageAsBase64(final Canvas canvas ) throws Exception {
    Bitmap imageBitmap = canvas.getBitmap();
    String encodedString = bitMapToBase64(imageBitmap);
    AfterCanvasBase64(encodedString);
  }

Calling .getBitmap() should be enough.

But... since I believe the extension build sources are not yet updated, you should use this code instead:

@SimpleFunction(description = "Get Canvas Image and returns base64 string")
  public void GetCanvasImageAsBase64(final Canvas canvas) throws Exception {
    final Method method = canvas.getClass().getDeclaredMethod("getBitmap");
    Bitmap imageBitmap = (Bitmap) method.invoke(canvas);
    String encodedString = bitMapToBase64(imageBitmap);
    AfterCanvasBase64(encodedString);
  }

This one, I can assure you, will not break in future.

[TIMAI2]

Did you mean to leave out this:

final View canvasView = canvas.getView();

???

[Kumaraswamy]

That's not required anymore, the code I posted will work.

[TIMAI2]

Thanks so much, just testing....

[TIMAI2]

Works just fine, if a bit slow (using companion), but it works which is the main thing.

Many thanks again