通过 JavaScript 接口将图像从 Android 传递到 HTML (WebView)答案

【问题标题】：Pass an image from Android via JavaScript interface to HTML (WebView)通过 JavaScript 接口将图像从 Android 传递到 HTML (WebView)
【发布时间】：2013-09-20 09:16:03
【问题描述】：

我正在尝试在我的 HTML 文件中显示图像。图像由 Android 加载并存储在 SQLite 中。如何通过 AndroidInterface 将图像（位图）传递给 HTML？正确的方法是什么？

【问题讨论】：

标签： javascript android bitmap

【解决方案1】：

我会尝试将图像保存到存储文件夹，然后刷新 Web 组件中的页面以显示图像。

我正在使用这种方法为我的应用显示上下文帮助。 html 页面和图像存储在 sqlite 数据库中。

我正在使用WebView：

http://developer.android.com/reference/android/webkit/WebView.html

【讨论】：

【解决方案2】：

如果您有保存为文件的位图，则可以将本地文件路径传递给 javascript。您必须将 WebView 的“setDomStorageEnabled”设置为 True

        <!-- language: lang-java -->
        JSONArray list = new JSONArray();
        for(...){
            JSONObject object = new JSONObject();
            try {
                object.put("img", "LOCAL_IMAGE_SRC_PATH");
                object.put("name", nameString);
                list.put(i++, object);
            } catch (JSONException e) {}
        }

        if(mWebView!=null){
            mWebView.loadUrl("javascript:addList('" + list + "');");
        }

function addContactItem(src, name){
    var p = document.createElement("P");
    p.innerHTML = name;
    var img = document.createElement("IMG");
    img.setAttribute("src", src);
    img.setAttribute("width", "100");
    img.setAttribute("height", "100");
    img.setAttribute("alt", "Your image here");

    var li = document.createElement("LI");
    li.appendChild(img);
    li.appendChild(p);

    document.getElementById('contact_list').appendChild(li);
};

function addList(list){
    var myList = JSON.parse(list);
    for(var i=0; i<myList.length; i++){
        console.log("img: " + myList[i].img + " name: " + myList[i].name);
        addItem(myList[i].img, myList[i].name);
    }
};

【讨论】：