Run Html5 inside Webview android

Question

I have a page in Html5, where I would like to open it in Webview android, but it seems that Webview does not interpret javascript.

There is a better Webview?

See my code:

Mainactivity

package br.com.aaaa;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webview = new WebView(this);
        setContentView(webview);
        webview.loadUrl("http://www.hostcia.net/testes/html5Assinatura/");


    }
}

Behold: http://www.hostcia.net/testes/html5Assinatura/

The link above is from the test page where you can mark points on the drawing. This structure will also be used for signature.

Answer 1

Hello, you need to put the permission in the Manifest:

 <uses-permission android:name="android.permission.INTERNET" />

Still in Manifest, but inside application, add:

android:usesCleartextTraffic="true"

Inside your Activity, before webview.loadUrl... add:

    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setAppCacheEnabled(true);

Edit1:

Based on this link Detect the click of the Button

To do the button processing to recover the generated image and save it create a new Class

and create the following methods:

 public static String parseBase64(String base64) {

        try {
            Pattern pattern = Pattern.compile("((?<=base64,).*\\s*)",Pattern.DOTALL|Pattern.MULTILINE);
            Matcher matcher = pattern.matcher(base64);
            if (matcher.find()) {
                return matcher.group();
            } else {
                return "";
            }
        } catch (Exception e) {
            e.printStackTrace();

        }
        return "";
    }
    public static void downloadFileFromBase64(String fileContent) {
        try {
            File file = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM), "Camera");
                file.mkdirs();
                if (fileContent != null) {
                    String attachment = parseBase64(fileContent);
                    byte[] byteArr = Base64.decode(attachment, Base64.DEFAULT);
                    File f = new File(file.getAbsolutePath(),"sample.png");
                    f.createNewFile();
                    FileOutputStream fo = new FileOutputStream(f);
                    fo.write(byteArr);
                    fo.close();
                }
                
            }catch (Exception e){
            e.printStackTrace();
        }
    }

These two methods parse the Base64 and save the image in the camera directory of the mobile phone.

In the Activity that is webview, below webview.loadUrl... add:

webview.addJavascriptInterface(new Object() {
           @JavascriptInterface           // For API 17+
           public void performClick(String strl)
           {
               //ação para o clique do botão "save"
               downloadFileFromBase64(strl);

           }
       }, "save");

To succeed in saving the image you need to give permissions in Manifest:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Even so it is important to check if permission has been given, so in your Activity create the following method:

public static boolean hasPermissions(Context context, String... permissions) {
    if (context != null && permissions != null) {
        for (String permission : permissions) {
            if (ActivityCompat.checkSelfPermission(context, permission) != PackageManager.PERMISSION_GRANTED) {
                return false;
            }
        }
    }
    return true;
}

Still on Activity, but inside onCreate(); add:

String[] permissions = {
                //aqui pode acrescentar todas as permissões que estão no Manifest
                android.Manifest.permission.WRITE_EXTERNAL_STORAGE,

        };
        if (!hasPermissions(this, permissions)) {
            ActivityCompat.requestPermissions(this, permissions, 1);
        }

IMPORTANT:

To do this, I changed your html by following the link which I based, because as I had spoken I do not understand javascript, follows the modified html:

https://jsfiddle.net/wxjkb4Lt/3/