How to send binary image from Android to JavaScript

Question

I have a Hybrid Android app and I'm trying to send a binary image file from Android to a webview so that I can use JavaScript to rotate/crop it.

I tried converting it to a base64 string and sending it that way but it took way too long and sometimes would never finish sending. This is what I have currently:

public String bitMapToBase64(){
    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    //add support for jpg and more.
    bitMap.compress(Bitmap.CompressFormat.PNG, 50, byteArrayOutputStream);
    byte[] byteArray = byteArrayOutputStream .toByteArray();

    String encoded = Base64.encodeToString(byteArray, Base64.DEFAULT);

    return encoded;
}

Is there a way to send the data as binary and receive it as binary on the webview and then convert it to a File object with JavaScript?

Is there a more efficient way of trying to do this?

Rajesh N · Accepted Answer · 2017-10-03 03:16:33Z

1

You can do it using JavaScriptInterface

write down following code in your Android Java file

public class JavaScriptInterface {
    Context mContext;
    JavaScriptInterface(Context c) {
        mContext = c;
    }    

    @JavascriptInterface
 public String bitMapToBase64()
  {
    ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
    //add support for jpg and more.
    bitMap.compress(Bitmap.CompressFormat.PNG, 50, byteArrayOutputStream);
    byte[] byteArray = byteArrayOutputStream .toByteArray();

    String encoded = Base64.encodeToString(byteArray, Base64.DEFAULT);

    return encoded;
  }
}

set following setting to your webview

   webView.setWebChromeClient(new WebChromeClient() {});
    WebSettings settings = webView.getSettings();
    settings.setJavaScriptEnabled(true);
    settings.setDomStorageEnabled(true);
    webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

Then write down following code in your webpage

Html and javascript:

<input type="button" value="Get from android" onClick="getFromAndroid()" />
<script type="text/javascript">
    var myVar = null;
    function getFromAndroid() {
        myVar = Android.bitMapToBase64();
        alert(myVar);
    }
</script>

answered Oct 3, 2017 at 3:16

Rajesh N

6,7332 gold badges57 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Miguel Coder Over a year ago

I was asking if I could receive binary data from Java instead of a base64 image because it takes too long to encode(even with a galaxy s8)

Rajesh N Over a year ago

can you try this method to endcode Base64.encodeToString(data, Base64.NO_WRAP);? I had used this method to encode byte array and its working fast event with big size image

Rajesh N Over a year ago

android.util.Base64.encodeToString(data, Base64.NO_WRAP);

Miguel Coder Over a year ago

The only thing I did different from your example was the settings.setDomStorageEnabled(true); which I'm pretty sure I don't need because I'm not storing it in sessionStorage or localStorage

Rajesh N Over a year ago

other solution is upload your image in web server and get that live url and then pass it to your webview and use it

|

Collectives™ on Stack Overflow

How to send binary image from Android to JavaScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related