Load images in Html.fromHtml in textview (http url images, Base64 url images)

Question

I have a textview in which I am showing content of a forum post, which is entered on website using rte, the content involves images, both of type web url and of type Base64.. The default implementation of Html.fromHtml replaces all the img tags with small square..

I looked on SO for solution to load images from url using Html.fromHtml method, turns out there is way to do it, we can pass a ImageGetter to the function.. I found this awesome answer which implements the url fetch part, but this fails and crashes the app when the content has an image of Base64..

I looked a way to create images for Base64 src but none of the solutions are working, If anyone has implemented the whole solution its great. If someone has just the Base64 part please provide that I'll integrate both..

read my question, I have used this answer.. I am asking for a situation in which the solution fails and crashes the app.. I have even highlighted that part in my question... Seems like you have deleted your comment.. — Rajat Singhal, Apr 08 '14 at 12:16
checkout these two links: [Use webview to show base64 images](http://srivamshikar.blogspot.in/2012/10/loading-image-from-base64-string-in.html) and [this one](http://stackoverflow.com/questions/20897973/how-to-load-any-format-of-base64-data-to-webview-in-android) — jitain sharma, Apr 08 '14 at 12:29
@jitainsharma I am not using webview, and neither was the guy who answered the guy whose answer u provided in last comment, which I was alredy using.. please read the context.. thnx for the help anyway..:) — Rajat Singhal, Apr 08 '14 at 12:33

score 21 · Accepted Answer · edited May 23 '17 at 10:31

Finally after spending hours on this I have found the solution to the Base64 image.. I am posting the complete solution here..

I would once again like to thank https://stackoverflow.com/a/15617341/1114536 for the base answer..

Turns out the answer I was using as reference was just copy of this asnwer..

URLDrawable.java

import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;

public class URLDrawable extends BitmapDrawable {
    // the drawable that you need to set, you could set the initial drawing
    // with the loading image if you need to
    protected Drawable drawable;

    @Override
    public void draw(Canvas canvas) {
        // override the draw to facilitate refresh function later
        if(drawable != null) {
            drawable.draw(canvas);
        }
    }
}

URLImageParser.java

import java.io.InputStream;
import java.net.URL;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.text.Html.ImageGetter;
import android.util.Base64;
import android.view.View;

public class URLImageParser implements ImageGetter {
    Context context;
    View container;

    public URLImageParser(View container, Context context) {
        this.context = context;
        this.container = container;
    }

    public Drawable getDrawable(String source) {   
        if(source.matches("data:image.*base64.*")) {
            String base_64_source = source.replaceAll("data:image.*base64", "");
            byte[] data = Base64.decode(base_64_source, Base64.DEFAULT);
            Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);                
            Drawable image = new BitmapDrawable(context.getResources(), bitmap);
            image.setBounds(0, 0, 0 + image.getIntrinsicWidth(), 0 + image.getIntrinsicHeight()); 
            return image;
        } else {
            URLDrawable urlDrawable = new URLDrawable();
            ImageGetterAsyncTask asyncTask = new ImageGetterAsyncTask(urlDrawable);
            asyncTask.execute(source);          
            return urlDrawable; //return reference to URLDrawable where We will change with actual image from the src tag
        }        
    }

    public class ImageGetterAsyncTask extends AsyncTask<String, Void, Drawable> {
        URLDrawable urlDrawable;

        public ImageGetterAsyncTask(URLDrawable d) {
            this.urlDrawable = d;
        }

        @Override
        protected Drawable doInBackground(String... params) {
            String source = params[0];
            return fetchDrawable(source);
        }

        @Override
        protected void onPostExecute(Drawable result) {         
            urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0 + result.getIntrinsicHeight()); //set the correct bound according to the result from HTTP call            
            urlDrawable.drawable = result; //change the reference of the current drawable to the result from the HTTP call          
            URLImageParser.this.container.invalidate(); //redraw the image by invalidating the container
        }

        public Drawable fetchDrawable(String urlString) {
            try {
                InputStream is = (InputStream) new URL(urlString).getContent();
                Drawable drawable = Drawable.createFromStream(is, "src");
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(), 0 + drawable.getIntrinsicHeight()); 
                return drawable;
            } catch (Exception e) {
                return null;
            } 
        }
    }
}

Usage:

TextView comment_content_container = ((TextView)findViewById(R.id.comment_content));
comment_content_container.setText(Html.fromHtml(comment.content, new URLImageParser(comment_content_container, this), null));

If anyone knows better regex for the Base64, please reply I will update the answer..

This is really very good. Worked first time, out of the box. Nice work and ty. — MikeNereson, May 01 '14 at 16:59
URLImageParser$ImageGetterAsyncTask.onPostExecute(URLImageParser.java:56) its crashing — Dhrupal, Jul 24 '14 at 09:49
I tried this, and it worked, but my image was way too small (about 5 by 5 pixels, when normally it should be like 50 by 50 pixels). — Rock Lee, Oct 22 '15 at 09:30
I got stuck with the issue ::: The inline style not applied , like style=color:red;" — Subin Babu, May 29 '18 at 12:14
Html.fromHtml with these 3 parameters is deprecated as of API 24 — Desolator, Oct 28 '19 at 23:15

score 4 · Answer 2 · answered Mar 13 '15 at 10:08

As an extra to Rajat Singhal's answer (sorry, i don't have enough reputation to post a comment):

My drawable was having the wrong size (it was smaller), because drawables take into account the screen density. In order to preserve the original image size, I ended up doing this, in the fetchDrawable method:

public Drawable fetchDrawable(String urlString) {
        try {
            InputStream is = (InputStream) new URL(urlString).getContent();
            Bitmap bmp = BitmapFactory.decodeStream(is);
            Drawable drawable = new BitmapDrawable (context.getResources(), bmp);
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            return drawable;
        } catch (Exception e) {
            return null;
        }
    }

This worked as well, but my image was only slightly bigger than the teeny-tiny size. It was at least readable, but it was smaller than when I used WebView. I wish it was bigger. Also, it partially overlapped one line of text directly above the image, although it didn't overlap when the image was super tiny when implementing Rajat's answer. — Rock Lee, Oct 22 '15 at 09:33

score 1 · Answer 3 · answered Oct 29 '19 at 17:33

I just wanted to fix the size of the image from Rajat's answer, the image will take the full width of the textview and keeps the aspect ratio for the height. here's my update:

    public Drawable getDrawable(String source)
    {
        if(source.matches("data:image.*base64.*"))
        {
            String base_64_source = source.replaceAll("data:image.*base64", "");
            byte[] data = Base64.decode(base_64_source, Base64.DEFAULT);
            Bitmap bitmap = BitmapFactory.decodeByteArray(data, 0, data.length);
            Drawable image = new BitmapDrawable(context.getResources(), bitmap);

            float ratio = container.getWidth() / image.getIntrinsicWidth();
            int width = container.getWidth();
            int height = Math.round(image.getIntrinsicHeight() * ratio);

            image.setBounds(0, 0, width, height);
            return image;
        }
        else
        {
            ....
        }
    }

    public class ImageGetterAsyncTask extends AsyncTask<String, Void, Drawable>
    {
        ....

        @Override
        protected void onPostExecute(Drawable result)
        {
            if(result != null)
            {
                float ratio = container.getWidth() / result.getIntrinsicWidth();
                int width = container.getWidth();
                int height = Math.round(result.getIntrinsicHeight() * ratio);
                urlDrawable.setBounds(0, 0, width, height); //set the correct bound according to the result from HTTP call
                urlDrawable.drawable = result; //change the reference of the current drawable to the result from the HTTP call
                URLImageParser.this.container.invalidate(); //redraw the image by invalidating the container
            }
        }

        public Drawable fetchDrawable(String urlString)
        {
            try
            {
                InputStream is = (InputStream) new URL(urlString).getContent();
                Bitmap bmp = BitmapFactory.decodeStream(is);
                Drawable drawable = new BitmapDrawable (context.getResources(), bmp);

                float ratio = container.getWidth() / drawable.getIntrinsicWidth();
                int width = container.getWidth();
                int height = Math.round(drawable.getIntrinsicHeight() * ratio);

                drawable.setBounds(0, 0, width, height);
                return drawable;
            }
            catch (Exception e)
            {
                return null;
            }
        }

    }
}

However, Ranjat's solution shows only 1 image. If you wanna show multiple images then you need to use ImageSpan inside SpannableStringBuilder if you need an example let me know in a comment.

Load images in Html.fromHtml in textview (http url images, Base64 url images)

3 Answers3

Linked