使用javascript或jquery在网络视图中显示本地android图像

Display local android image in a webview using javascript or jquery

本文关键字：显示 android 图像 视图 javascript jquery 网络 使用      更新时间：2023-09-26

场景：我试图使用javascricpt和/或jquery将从库中选择的文件图像显示到网络视图中，但我无法做到这一点。在桌面浏览器中打开html时也是如此。

到目前为止，我尝试过的是安卓代码中的这个：

  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不太了解。

请帮助了解如何在从图库中选择后显示图像。

编辑：

我已经浏览了lotsa链接，这些链接显示了如何从android调用javscript函数，以及如何通过使用src标记中有图像的新html代码调用loadBaseUrl来显示图像，就像这样，但这不是我真正想要的。

对于那些陷入这种情况的人：我将loadImage方法的功能更改为将接收到的文件转换为字节

步骤：1.从android中读取一个文件，并将路径发送到js函数2.将路径传递给读取器，当读取器加载文件时，会调用onLoadEnd方法3.使用代码将文件转换为字节

var stringToReplace = reader.result;
stringToReplace = stringToReplace.replace('data:base64,','data:image'/jpeg;base64,');
  1. 将图像源设置为在#3中获得的字符串
相关文章：