Question

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

我到目前为止所尝试的是在Android代码中这是：

编写openFileChooser代码并获取图像路径以及图像字节。

在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来显示图像，其中新的html代码在src标记内部有一个图像，如this，但这不是我真正想要的。

Answer 1

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

的方法

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

将文件转换为字节

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

将图像源设置为＃3中获得的字符串。

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

1 个答案: