时间戳

首页 > 解决方案 > 无法将opencv与android webview一起使用

javascript - 无法将opencv与android webview一起使用

问题描述

由于在设计我的应用程序时（第一次）存在一些非常小的问题，我计划以这种方式创建应用程序......

首先使用 java 制作的文件选择器从用户设备中获取图像。其次，将 base64 编码的图像 url 发送到 webview 中的 html 和 javascript 代码，并在函数 init 中将其作为参数 'val' 访问。这是我的java代码：


import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.util.Base64;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ImageView;

import java.io.ByteArrayOutputStream;
import java.io.IOException;

public class MainActivity extends AppCompatActivity {
    // ImageView imageView;
    Button btn_filePicker;
    Intent myFileIntent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // imageView = (ImageView)findViewById(R.id.imageView);
        btn_filePicker = (Button)findViewById(R.id.btn_filePicker);

        btn_filePicker.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                myFileIntent = new Intent(Intent.ACTION_GET_CONTENT);
                myFileIntent.setType("*/*");

                startActivityForResult(myFileIntent, 10);

            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {

        switch (requestCode) {
            case 10:
                if (resultCode == RESULT_OK) {
                    String path = data.getData().getPath();
                    Uri uri = data.getData();

                    //Convert it as Bitmap
                    Bitmap bitmap = null;
                    String image = null; //Base64 Encoded Image
                    try {
                        bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), uri);

                        // Convert bitmap to Base64 encoded image for web
                        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
                        bitmap.compress(Bitmap.CompressFormat.PNG, 100, byteArrayOutputStream);
                        byte[] byteArray = byteArrayOutputStream.toByteArray();
                        String imgageBase64 = Base64.encodeToString(byteArray, Base64.DEFAULT);
                        image = "data:image/png;charset=utf-8;base64," + imgageBase64;

                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                    String image_final = image;

                    WebView webView = (WebView) findViewById(R.id.webview);
                    WebSettings webSettings = webView.getSettings();
                    webSettings.setJavaScriptEnabled(true);
                    webView.loadUrl("file:///android_asset/index.html");
                    webView.setWebViewClient(new WebViewClient(){
                        public void onPageFinished(WebView view, String url){
                            if (image_final != null)
                                webView.loadUrl("javascript:init('" + image_final + "')");
                        }

                    });
                }
                break;
        }
    }
}

然后最后使用opencv js将其转换成灰度图并显示在画布中。在我的html代码中：

<html>
<head>
    <title>
        Hi
    </title>
</head>
<body>
<img id="image" height="300" width="300">
<canvas id="output" height="300"></canvas>
<script async src="./opencv1.js"></script>
<script>
    function init(val){
        var img_input = document.getElementById("image");
        img_input.src = val;
        img_input.onload = function(){
            let mat = cv.imread(val);
            cv.cvtColor(mat, mat, cv.COLOR_RGB2GRAY);
            cv.imshow('output', mat);   
            mat.delete();   
        }
    }
</script>
</body>
</html>

我成功完成了前两个步骤，但无法完成最后一步。在 webview（xml 代码如下）中，我已通过 img 标签成功地将 base64 编码图像（由用户选择）显示到 webview。但是，画布占用了 webview 中的空间，但处理后的图像没有显示。下面是xml代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="283dp"
        android:layout_height="296dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.39" />

    <Button
        android:id="@+id/btn_filePicker"
        android:layout_width="370dp"
        android:layout_height="76dp"
        android:text="Select File"
        android:textAllCaps="false"
        app:backgroundTint="#3F51B5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.487"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.842" />

    <Button
        android:id="@+id/button"
        android:layout_width="370dp"
        android:layout_height="76dp"
        android:text="Convert "
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.485"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.975" />

</androidx.constraintlayout.widget.ConstraintLayout>

欢迎任何建议...

标签： javascriptjavaandroidandroid-studioopencv

解决方案

推荐阅读