Sending base64 URLs from Android WebView to Javascript can be tricky due to the limitation on the URL length, which may result in a refusal

Question

Sending base64 URLs from Android WebView to Javascript can be tricky due to the limitation on the URL length, which may result in a refusal

Trying to send a base64 image to JavaScript is proving challenging as I keep encountering an error in Android Studio:

W/chromium: [WARNING:navigator_impl.cc(280)] Refusing to load URL as it exceeds 2097152 characters.

Despite attempting to use loadDataWithBaseURL, I am struggling to get the JavaScript to execute properly - leaving me uncertain if it's a viable solution.

The code I'm using works for some images but fails with larger ones, resulting in the aforementioned error.

If anyone has any insights or solutions, they would be greatly appreciated!

if (resultCode == RESULT_OK)
{
    Uri selectedImage = intent.getData();
    myWebView.loadUrl("javascript:setFileUri('" + selectedImage.toString() + "')");
    String path = getRealPathFromURI(this, selectedImage);
    //myWebView.loadUrl("javascript:setFilePath('" + path + "')");


    Bitmap bm = BitmapFactory.decodeFile(path);
    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    bm.compress(Bitmap.CompressFormat.JPEG, 100, baos); //bm is the bitmap object
    byte[] b = baos.toByteArray();

    String encodedImage = Base64.encodeToString(b, Base64.DEFAULT);

    myWebView.loadUrl("javascript:setFilePath('" + encodedImage + "')");
}

javascript android webview base64

Answer 1

Answer №1

If you're still in search of a solution for sending an image to Javascript, I went through the same struggle today. The loadUrl method was causing me trouble with the '2097152' error, so I decided to give evaluateJavascript a try. Unfortunately, I encountered webview syntax errors. However, after some experimentation, I managed to make it work using the following approach:

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
byte[] byteArray = byteArrayOutputStream.toByteArray();
String encoded = Base64.encodeToString(byteArray, Base64.DEFAULT);

try {
    final String retFunction = "imageReturnFunction('data:image/png;base64," + URLEncoder.encode(encoded, "UTF-8") + "');";

    runOnUiThread(new Runnable() {
        public void run() {
            webView.evaluateJavascript(retFunction, null);
        }
    });
} catch(Exception ex) {
    ex.printStackTrace();
}

In my case, I required the format to be a dataURL (which is often needed in JS applications), but feel free to adjust the code to fit your specific requirements. Hopefully, this solution proves helpful to you.

Answer 2

If you're still in search of a solution for sending an image to Javascript, I went through the same struggle today. The loadUrl method was causing me trouble with the '2097152' error, so I decided to give evaluateJavascript a try. Unfortunately, I encountered webview syntax errors. However, after some experimentation, I managed to make it work using the following approach:

ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
byte[] byteArray = byteArrayOutputStream.toByteArray();
String encoded = Base64.encodeToString(byteArray, Base64.DEFAULT);

try {
    final String retFunction = "imageReturnFunction('data:image/png;base64," + URLEncoder.encode(encoded, "UTF-8") + "');";

    runOnUiThread(new Runnable() {
        public void run() {
            webView.evaluateJavascript(retFunction, null);
        }
    });
} catch(Exception ex) {
    ex.printStackTrace();
}

In my case, I required the format to be a dataURL (which is often needed in JS applications), but feel free to adjust the code to fit your specific requirements. Hopefully, this solution proves helpful to you.

Answer 3

Answer №2

Referring to bastecklein's response

const functionJS = `"$jsEntryPoint('data:image/jpeg;base64,' +
                     base64String.replace('\n', '') 
                    +'');"`;

Answer 4

Referring to bastecklein's response

const functionJS = `"$jsEntryPoint('data:image/jpeg;base64,' +
                     base64String.replace('\n', '') 
                    +'');"`;

Answer 5

Answer №3

Despite my delayed response, a sudden solution emerged when I faced a problem that required reducing the size of a string passed to a WebView. Below is a potential solution that worked for me and might be helpful for you:

 public static String prepareImageForWebView(String img64) {
    final int IMAGE_MAX_SIZE = 0x100000; // 1048576
    if (img64.length() > IMAGE_MAX_SIZE) {
        byte[] bytes = Base64.decode(img64, Base64.DEFAULT);

        BitmapFactory.Options o = new BitmapFactory.Options();
        o.inJustDecodeBounds = true;
        Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length, o);

        int scale = 1;
        while ((o.outWidth * o.outHeight) * (1 / Math.pow(scale, 2)) > IMAGE_MAX_SIZE) {
            scale++;
        }

        if (scale > 1) {
            scale--;

            o = new BitmapFactory.Options();
            o.inSampleSize = scale;
            bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length, o);
            
            assert bitmap != null;
            int height = bitmap.getHeight();
            int width = bitmap.getWidth();

            double y = Math.sqrt(IMAGE_MAX_SIZE / (((double) width) / height));
            double x = (y / height) * width;

            Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, (int) x, (int) y, true);
            bitmap.recycle();
            bitmap = scaledBitmap;

            System.gc();
        }

        if (bitmap == null) {
            return img64;
        }

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.JPEG, 90, baos);
        bytes = baos.toByteArray();
        return Base64.encodeToString(bytes, Base64.DEFAULT);
    } else {
        return img64;
    }
}

To use this function, follow the sample code below:

 image = "<img style=\"display:inline;height:auto; max-width:100%;\" " +
                "src=\"data:image/jpg; base64," +
                prepareImageForWebView(imageData) + "\" />";
webView.loadData(image, "text/html", "UTF-8");

If needed, adjust the value of IMAGE_MAX_SIZE to control the output size of the Base64 string. For instance, recompressing a 6 MB base64 file can retain sufficient quality for clear text reading in an A4-sized image.

Answer 6

Despite my delayed response, a sudden solution emerged when I faced a problem that required reducing the size of a string passed to a WebView. Below is a potential solution that worked for me and might be helpful for you:

 public static String prepareImageForWebView(String img64) {
    final int IMAGE_MAX_SIZE = 0x100000; // 1048576
    if (img64.length() > IMAGE_MAX_SIZE) {
        byte[] bytes = Base64.decode(img64, Base64.DEFAULT);

        BitmapFactory.Options o = new BitmapFactory.Options();
        o.inJustDecodeBounds = true;
        Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length, o);

        int scale = 1;
        while ((o.outWidth * o.outHeight) * (1 / Math.pow(scale, 2)) > IMAGE_MAX_SIZE) {
            scale++;
        }

        if (scale > 1) {
            scale--;

            o = new BitmapFactory.Options();
            o.inSampleSize = scale;
            bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length, o);
            
            assert bitmap != null;
            int height = bitmap.getHeight();
            int width = bitmap.getWidth();

            double y = Math.sqrt(IMAGE_MAX_SIZE / (((double) width) / height));
            double x = (y / height) * width;

            Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, (int) x, (int) y, true);
            bitmap.recycle();
            bitmap = scaledBitmap;

            System.gc();
        }

        if (bitmap == null) {
            return img64;
        }

        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.JPEG, 90, baos);
        bytes = baos.toByteArray();
        return Base64.encodeToString(bytes, Base64.DEFAULT);
    } else {
        return img64;
    }
}

To use this function, follow the sample code below:

 image = "<img style=\"display:inline;height:auto; max-width:100%;\" " +
                "src=\"data:image/jpg; base64," +
                prepareImageForWebView(imageData) + "\" />";
webView.loadData(image, "text/html", "UTF-8");

If needed, adjust the value of IMAGE_MAX_SIZE to control the output size of the Base64 string. For instance, recompressing a 6 MB base64 file can retain sufficient quality for clear text reading in an A4-sized image.

Sending base64 URLs from Android WebView to Javascript can be tricky due to the limitation on the URL length, which may result in a refusal

Answer №1

Answer №2

Answer №3

Similar questions

Haxe: Ways to keep the android menu bar hidden for a seamless user experience

GSON simplifies mapping data to different fields in a flat structure

How come modifications to a node package are not reflected in a React.js application?

The element possesses an implicit 'any' type as the expression containing 'string' cannot index the type '{}'

How to prompt device to seek user permission again with ios 13 DeviceOrientationEvent.requestPermission

Using app.get('env') in local development and live production settings

What are the differences between using .val() and .innerHTML?

The React Native app mysteriously crashes repeatedly without generating any error logs when using the same component multiple

AngularJS is throwing a RangeError, indicating that the time value is invalid when calling Date.toISOString

What is the reason for the PHP condition not functioning properly unless I explicitly echo the variable?

Are you experiencing issues with emojis not displaying correctly in the Facebook JSON data?

Having trouble getting the lightning to cooperate

Distinguishing between native and custom error objects: a comprehensive guide

Struggling to convert a CSV file into an array of objects

What is the reason behind the inability to set a maximum width for containers?

Is it possible to create a destructor specifically for handling RXJS Observables?

Implement CSRF protection for wicket ajax requests by adding the necessary header

Searching through a MySQL array with a deductive filter using either PHP or JavaScript

Invoking a PHP class through an AJAX response handler code

What is the best way to ensure that a status is updated only when needed in a JavaScript code?