javascript - 使用 javascript 或 jquery 在 webview 中显示本地 android 图像

Question

场景:我正在尝试使用 javascricpt 和/或 jquery 将从图库中选择的文件图像显示到 webview 中，但我无法这样做。在桌面浏览器中打开 html 时同样有效。

到目前为止，我在 android 代码中尝试的是这样的:

1. 编写openFileChooser 代码并获取图像路径和图像字节。

2. 在 onActivityResult 方法中调用以下内容:

   String js = "javascript:loadImage(file://" + imagePath + ")";
   mWebView.loadUrl(js);
   

html 看起来像这样:

<div class="file_chooser">
<!-- <input type="submit" value="File chooser" id="btnSubmit" onclick="sayHello();" > -->
<input type="file" name="banner_image" id="banner_image" onChange="loadImage(this);" accept="image/*" />

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />

<img alt="" id="image" src=""  width="200px" height="200px" onclick="showSrc(this.src);">
</div>

javascript 看起来像这样:

<script type="text/javascript">
    function loadImage(input) {
            if (input.files && input.files[0]) {
            Android.alert('input: ' + input.files[0]);
        var reader = new FileReader();


        reader.onload = (function(input) {
    return function(e) {
         $('#image').attr('src', e.target.result);
        console.log('onload stage finished');
    };
})(input);
reader.onloadend = (function() {
    // $('#image').src(file.name);
});

            reader.readAsDataURL(input.files[0]); 

            //data:image/jpg;base64,xxxxxxxxxxxxxxxxxxxxxxxxxxxx -> this did not work
        }

  function showSrc(src) {
        Android.alert('src : ' + src);
    }
</script>

但我似乎在搞乱 android 代码和 javascript，因为我不太了解 jscript。

请协助从图库中选择图像后如何显示。

编辑:

我浏览了很多链接，这些链接展示了如何从 android 调用 javscript 函数，以及如何通过调用 loadBaseUrl 以及在 src 标签内有图像的新 html 代码来显示图像，例如 this ，但这不是我真正想要的。

Answer 1

对于遇到这种情况的人:我将 loadImage 方法的功能更改为将接收到的文件转换为字节的方法

步骤:1.从android读取文件并将路径发送给js函数2. 将路径传递给阅读器，当阅读器加载文件时，调用 onLoadEnd 方法3.使用代码将文件转换成bytes

var stringToReplace = reader.result;
stringToReplace = stringToReplace.replace('data:base64,','data:image\/jpeg;base64,');

1. 将图片源设置为#3中获取的字符串。