Javascript в андроиде с js библиотеками - PullRequest
1 голос
/ 30 июня 2019

Как я могу использовать этот код JS в Android

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script language="javascript">
$(document).ready(function() {
var testdiv = document.querySelectorAll("table.troisbords:nth-child(6) table.troisbords div.box_login:nth-child(1) table:nth-child(1) tbody:nth-child(1) tr:nth-child(4) td:nth-child(2) > img:nth-child(1)");

    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});
</script>

Я сделал это, но получаю много ошибок

@Override
    public void onPageFinished(WebView view, String url) {
     view.loadUrl("javascript: ( <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script language="javascript">
                $(document).ready(function() {
            var testdiv = document.querySelectorAll("table.troisbords:nth-child(6) table.troisbords div.box_login:nth-child(1) table:nth-child(1) tbody:nth-child(1) tr:nth-child(4) td:nth-child(2) > img:nth-child(1)");

            html2canvas($("#testdiv"), {
                    onrendered: function(canvas) {
                // canvas is the final rendered <canvas> element
                var myImage = canvas.toDataURL("image/png");
                window.open(myImage);
            }
    });
        });
</script>
    })();");
}

как мне правильно интегрировать его в view.loadUrl("javascript:?

Правка после Лакшми Санкара и lvl4fi4 ответа

Мне нужно использовать библиотеку html2canvas, чтобы получить скриншот элемента на веб-сайте, загруженном в веб-просмотре

это сайт и элемент

https://www4.inscription.tn/ORegMx/servlet/AuthentificationEtud?ident=cin

enter image description here

Любая помощь будет оценена

Ответы [ 3 ]

0 голосов
/ 30 июня 2019

поместите ваш скрипт в html-файл и поместите их в папку asset в проекте.

test.html

    <html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <style type="text/css">
    div {
        height: 100px;
        width: 100px;
        background-color: #2C7CC3;
    }
    </style>

    <script>
    function callFromActivity(){
        html2canvas($("#testdiv"), {
            onrendered: function(canvas) {
                var myImage = canvas.toDataURL("image/png");
                window.android.onData(myImage);
            }
        });
    }
    </script>
</head>
<body>
<div id="testdiv">
    <input type="text"></input>
    <button onclick="callFromActivity();">Click me</button>
</div>
</body>
</html>

создать служебный класс для чтения test.html из asset.

ReadAsset.java

    public class ReadAsset {
    public static String read(String filePath, Context context) throws IOException {
        StringBuilder sb = new StringBuilder();
        InputStream is = context.getAssets().open(filePath);
        BufferedReader br = new BufferedReader(new InputStreamReader(is, "UTF-8"));
        String str;
        while ((str = br.readLine()) != null) {
            sb.append(str);
        }
        br.close();
        return sb.toString();
    }
}

в вашем макете создайте WebView. WebView :

 <WebView
    android:id="@+id/web_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/btn_start">

</WebView>

в своей деятельности создайте interface, чтобы получить обратный вызов из JavaScript

интерфейс в действии

  @JavascriptInterface
public void onData(String value) {
    android.util.Log.d("WebView", value);
    String html = "<html><body><img src=\"" + value + "\"/></body></html>";
    this.runOnUiThread(() ->
            webView.loadData(html, "text/html", "UTF-8"));
}

и, наконец, настройте webview и позвоните callFromActivity() с кнопки HTML или с кнопки Android

коды деятельности

 WebView webView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);
    Toolbar toolbar = findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    String html = "";
    try {
        html = ReadAsset.read("test.html", this);
    } catch (IOException e) {
        e.printStackTrace();
    }
    webView = findViewById(R.id.web_view);
    webView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
            android.util.Log.d("WebView", consoleMessage.message());
            return true;
        }
    });
    //webView.setWebViewClient(new WebViewClient());
    webView.clearCache(true);
    webView.clearHistory();
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    webView.addJavascriptInterface(this, "android");

    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setDisplayZoomControls(false);
    webView.getSettings().setSupportZoom(true);
    webView.getSettings().setDefaultTextEncodingName("utf-8");
    webView.getSettings().setPluginState(WebSettings.PluginState.ON);

    webView.loadData(html, "text/html", "UTF-8");


    findViewById(R.id.btn_start).setOnClickListener(v -> start());
}

void start() {

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
        webView.evaluateJavascript("callFromActivity();", null);
    } else {
        webView.loadUrl("javascript:callFromActivity();");
    }
}

что произойдет, если вы сделаете снимок экрана и загрузите его снова в webview, но у вас будут данные base64 в действии, чтобы вы могли делать с ним все, что захотите, или вы можете использовать javascript и использовать изображение там .

0 голосов
/ 02 июля 2019

я нашел обходной путь для этого,

я удалил все CSS-файлы на веб-сайте, затем заменил изображение в верхнем левом углу на изображение с картинки

Все это в onPageFinished с помощьюJavaScript

  @Override
public void onPageFinished(WebView view, String url) {
    view.loadUrl("javascript: (function(){        var selector = '#top1 > p > img'; document.head.appendChild(Object.assign(document.createElement('style'), { innerText: '*{visibility:hidden}' + selector + '{visibility:visible}' }));\n" +
            "document.body.style.marginLeft=\"0px\";\n" +
            "document.body.style.marginTop=\"0px\";\n" +
            "$(\"body > link:nth-child(1)\").removeAttr(\"href\");\n" +
            "$(\"body > link:nth-child(4)\").removeAttr(\"href\");\n" +
            "$(\"head > link:nth-child(18)\").removeAttr(\"href\");\n" +
            "document.querySelector(\"#top1 > p > img\").src=\"/ORegMx/capito.png\";\n})();");
}
0 голосов
/ 30 июня 2019

Просто поместите этот код в HTML-файл и сохраните этот файл в папке ресурсов Android.asset folder

, как файл sample.html на картинке, и загрузите этот HTML-код в Android, как это

    String htmlFilename = "sample.html";
    AssetManager mgr = getBaseContext().getAssets();
    try {
        InputStream in = mgr.open(htmlFilename, AssetManager.ACCESS_BUFFER);
        String htmlContentInStringFormat = StreamToString(in);
        in.close();
        htmlWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);

    } catch (IOException e) {
        e.printStackTrace();
    }

Отредактировано:

1) Включите JavaScript

webview.getSettings().setJavaScriptEnabled(true);

2) Сделайте так, чтобы ваш внешний скрипт выглядел следующим образом

javascript: (function() {

function loadDynamicJS(file, parent) {
    var jsElm = document.createElement("script");
    jsElm.type = "application/javascript";
    jsElm.src = file;
    parent.appendChild(jsElm);
}

loadDynamicJS('http://code.jquery.com/jquery-1.9.1.js', document.head);
loadDynamicJS('http://html2canvas.hertzen.com/dist/html2canvas.js', document.head);

var testdiv = document.querySelectorAll("table.troisbords:nth-child(6) table.troisbords div.box_login:nth-child(1) table:nth-child(1) tbody:nth-child(1) tr:nth-child(4) td:nth-child(2) > img:nth-child(1)");

html2canvas($("#testdiv"), {
    onrendered: function(canvas) {
        // canvas is the final rendered <canvas> element
        var myImage = canvas.toDataURL("image/png");
        window.open(myImage);
    }
});})();

3) Добавьте приведенный выше скрипт сюда

webView.setWebViewClient(new WebViewClient(){
@Override
public void onPageFinished(WebView view, String url) {
    super.onPageFinished(view, url);
    webView.loadUrl("YOUR SCRIPT HERE");
}});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...