Android HTML ImageGetter作为AsyncTask

Question

这个问题让我有些抓狂。我的程序中有一个解析HTML的方法，我想包含内联图像，并且我认为使用Html.fromHtml（string，Html.ImageGetter，Html.TagHandler）可以实现这一点。

由于Html.ImageGetter没有实现，因此需要我自己编写一个。但是，将URL解析为Drawable需要网络访问，因此不能在主线程上执行，必须使用AsyncTask。 我觉得是这样。

但是，当您将ImageGetter作为Html.fromHtml的参数传递时，它会使用必须重写的getDrawable方法。 因此，没有办法调用整个ImageGetter.execute过程来触发doInBackground方法，也就是说无法异步处理。

我是完全错误的吗？更糟糕的是，这是不可能的吗？谢谢

- Nick

---

我可能会因此而受到批评，但为什么不尝试使用自制线程（而不是asyncTask）来完成这个任务呢？这样就没有需要覆盖的内容，你可以实时观察发生的情况。你需要在主线程中使用一个handler和一个Runnable，在数据到达后调用它们。 - Yevgeny Simkin

@Nick：我很难理解。使用AsyncTask的哪个环节会出问题 - 你认为做什么部分不会起作用？ - Squonk

@MisterSquonk 使用AsyncTask是个问题，因为你必须在对象的实例上调用execute。然而，要使用ImageGetter，你需要将该实例作为Html.fromHtml函数的参数传递，并且该函数仅设计调用ImageGetter的getDrawable方法，这会在同一线程上运行，从而导致NetworkOnMainThreadException异常。 - Nick

对于图像重叠文本，请查看此答案：https://dev59.com/RWsz5IYBdhLWcg3wfnwx#10208504（适用于ICS之前，但在ICS上效果不佳）。 - Aladin Q

使用协程+Glide的替代方法请参见：https://dev59.com/q2Qo5IYBdhLWcg3wR9rE#58091529 - Marco RS

Answer 1

我之前做过与您想要做的类似（我想）的事情。当时我需要解析HTML并将其设置回TextView，同时我需要使用Html.ImageGetter，并且在主线程上获取图像时遇到了相同的问题。

我基本上采取的步骤如下：

• 创建自己的Drawable子类以便重新绘制，我称其为URLDrawable
• 在Html.ImageGetter的getDrawable方法中返回URLDrawable
• 一旦调用了onPostExecute，就会重新绘制Spanned结果的容器

现在，URLDrawable的代码如下：

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);
        }
    }
}

很简单，我只需要覆盖draw方法，这样在AsyncTask完成后，它就会选择我设置的Drawable。

下面这个类是Html.ImageGetter的实现，它从AsyncTask中获取图像并更新图像。

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

    /***
     * Construct the URLImageParser which will execute AsyncTask and refresh the container
     * @param t
     * @param c
     */
    public URLImageParser(View t, Context c) {
        this.c = c;
        this.container = t;
    }

    public Drawable getDrawable(String source) {
        URLDrawable urlDrawable = new URLDrawable();

        // get the actual source
        ImageGetterAsyncTask asyncTask = 
            new ImageGetterAsyncTask( urlDrawable);

        asyncTask.execute(source);

        // return reference to URLDrawable where I will change with actual image from
        // the src tag
        return urlDrawable;
    }

    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) {
            // set the correct bound according to the result from HTTP call
            urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0 
                    + result.getIntrinsicHeight()); 

            // change the reference of the current drawable to the result
            // from the HTTP call
            urlDrawable.drawable = result;

            // redraw the image by invalidating the container
            URLImageParser.this.container.invalidate();
        }

        /***
         * Get the Drawable from URL
         * @param urlString
         * @return
         */
        public Drawable fetchDrawable(String urlString) {
            try {
                InputStream is = fetch(urlString);
                Drawable drawable = Drawable.createFromStream(is, "src");
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(), 0 
                        + drawable.getIntrinsicHeight()); 
                return drawable;
            } catch (Exception e) {
                return null;
            } 
        }

        private InputStream fetch(String urlString) throws MalformedURLException, IOException {
            DefaultHttpClient httpClient = new DefaultHttpClient();
            HttpGet request = new HttpGet(urlString);
            HttpResponse response = httpClient.execute(request);
            return response.getEntity().getContent();
        }
    }
}

最后，以下是演示如何运作的样例程序：

String html = "Hello " +
"<img src='http://www.gravatar.com/avatar/" + 
"f9dd8b16d54f483f22c0b7a7e3d840f9?s=32&d=identicon&r=PG'/>" +
" This is a test " +
"<img src='http://www.gravatar.com/avatar/a9317e7f0a78bb10a980cadd9dd035c9?s=32&d=identicon&r=PG'/>";

this.textView = (TextView)this.findViewById(R.id.textview);
URLImageParser p = new URLImageParser(textView, this);
Spanned htmlSpan = Html.fromHtml(html, p, null);
textView.setText(htmlSpan);

- momo

---

这很好！不过有一个问题，当图片很大且在它们上面有一行文本时，图片会覆盖上方的文本而不是将文本移开以腾出空间。你有什么想法吗？ - maxpower47

我正在尝试使用上面发布的解决方案，但图像会隐藏HTML文件中的文本，并且如果有多张图片，则位置不正确。同时，在滚动视图到达顶部或底部边缘时，图像也会隐藏。我已经尝试在文本和图像之间放置<br/>和<p>以进行空格分隔，但没有帮助。 - anujprashar

这个方法非常有效，但是像@maxpower47建议的那样，仅使用invalidate()是不够的。如果您事先知道图像的大小，您可以简单地设置默认的可绘制对象足够大，然后invalidate()将起作用，但是，如果在下载图像之前您不知道这些信息，并且某些较大的图像重叠在您的文本上，则必须强制TextView重新呈现文本，而不仅仅是redraw()或re-requestLayout()。一个简单的解决方案是：TextView t = (TextView) URLImageGetterAsync.this.container; t.setText(t.getText());您可以决定是否需要更加健壮的解决方案。 - dcow

图像重叠错误修复可在此处获取：https://dev59.com/RWsz5IYBdhLWcg3wfnwx#10208504（适用于ICS之前和ICS） - Pascal

对我没有用 :( "urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0" 报空指针异常。 - Groosha

Answer 2

相当不错。然而，类型DefaultHttpClient已经被弃用。请尝试在获取方法上使用以下代码：

private InputStream fetch(String urlString) throws MalformedURLException, IOException {

        URL url = new URL(urlString);
        HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
        InputStream stream = urlConnection.getInputStream();

        return stream;

    }

- Fred Sousa

---

我遇到了问题：内联样式未应用，例如style=color:red;。 - Subin Babu

Answer 3

如果您正在使用Picasso，请将@momo代码的一部分更改为：

/***
         * Get the Drawable from URL
         * @param urlString
         * @return
         */
        public Drawable fetchDrawable(String urlString) {
            try {
                Drawable drawable = fetch(urlString);
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(), 0
                        + drawable.getIntrinsicHeight());
                return drawable;
            } catch (Exception e) {
                return null;
            }
        }

        private Drawable fetch(String urlString) throws MalformedURLException, IOException {
            return new BitmapDrawable(c.getResources(), Picasso.with(c).load(urlString).get());
        }

- Wackaloon

---

我遇到了问题：内联样式未应用，例如style=color:red;。 - Subin Babu

Answer 4

我有点困惑，您要呈现的HTML是静态的仅用于格式化，还是动态的来自网络？如果您想要后者，也就是呈现HTML并检索图像，那么这会有点麻烦（建议-只需使用WebView？）。

无论如何，您首先必须运行AsyncTask以检索初始HTML。然后，您将使用Html.ImageGetter类的自定义实现将这些结果传递到Html.fromHtml()中。然后，在该实现中，您必须启动单个AsyncTask以检索每个图像（您可能希望实现一些缓存）。

但是，从阅读文档（我认为我已经看过一些示例）来看，似乎这不是他们所指的Html.ImageGetter的用途。我认为它是用于硬编码HTML并引用内部可绘制对象的，但这只是我的看法。

- dmon

---

它来自于网络，好吧，我猜这很有道理。我真的不想使用 WebView。我已经编写了一个任务，当给定应用程序不同部分的图像 URL 时返回 Drawable，因此也许我可以以某种方式利用它。真是太麻烦了。 - Nick

Answer 5

AsyncTask task = new AsyncTask() {

                @Override
                protected String doInBackground(Integer... params) {
                    span = Html.fromHtml(noticeList.get(0)
                            .getContent(), imgGetter, null);
                    return null;
                }
                @Override
                protected void onPostExecute(String result) {
                    super.onPostExecute(result);
                    text.setMovementMethod(ScrollingMovementMethod
                            .getInstance());
                    if(span != null){
                        text.setText(span);
                    }
                }
            };

            task.execute();

- user5881594