Android Question webview - get a bitmap with javascript

[yo3ggx]

I want to extract the image in a bitmap using a webview and javascript commands.
The code on the web page looks like that:

<canvas class="mypic" id="mpcanvas0" width="1024" height="100" >test</canvas>

The image is dynamically changed. If I try:

Dim js As String
js = $"B4A.CallSub('pic_cb', true, document.getElementById('mpcanvas0'));"$
WebViewExtrasSDR.executeJavascript(WebView1,text)

Sub pic_cb(b As Object)
    Log("canvas")
End Sub

The routine is called only one time and I don't know what type of object is returned as is not a Canvas.

Thank you

 

[yo3ggx]

If I use:

document.getElementById('mpcanvas0').toDataURL()

returned value is a string containing the png file in base64 format:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg......."

 

[TILogistic]

To get or set the desired element, you can use this B4X routine.

Interact with HTML elements from B4j app?

hi I would like to know if I can load a site into a webview and then fill an HTML input element with text by calling his id property? or maybe simulate a button click in that site? (button element id is known) thanx, ilan

www.b4x.com

Click checkbox in webview and submit using javascript

Let me start by saying I am a noob in javascript. I was working with a webpage manipulating some items from B4J, and this https://www.b4x.com/android/forum/threads/how-to-manipulate-the-values-of-an-html-form-in-a-webview-object.47072/ thread helped me and I am now in the final stage. The last...

www.b4x.com

Wait for Javascript to complete

Dear All; if I run the script I get the last value for para3, is there a way to show each value in turn, like to wait for each script before starting the next one. Dim Javascript As String Javascript = $"B4A.CallSub('ProcessHTML', true, document.getElementById('para1').value,'para1')"$...

www.b4x.com

Private Sub RunJavaScript (js As String) As ResumableSub
    #if B4A
    WebViewExtras1.executeJavascript(WebView1, $"B4A.CallSub('Process_HTML', true, ${js})"$)
    Wait For Process_Html(html As String)
    Return html
    #Else If B4J
    Return WebView1.As(JavaObject).RunMethodJO("getEngine", Null).RunMethod("executeScript", Array(js))
    #Else If B4i
    Dim sf As Object = WebView1.EvaluateJavaScript(js)
    Wait For (sf) WebView1_JSComplete (Success As Boolean, Result As String)
    Return Result
    #end if
End Sub

ref:

Convert An Image To A DataURL or Base64 String Using JavaScript

In this short tutorial we explore 3 different JavaScript methods to convert an image into a Base64 string. We look at converting a File object or Blob, a canvas element, and an image tag.

pqina.nl

 

[TILogistic]

you can use StringUtils to convert base64 to image or image to base64

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg......."

 

[TILogistic]

EDIT:
a simple B4X example: URL base64 to image:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgA.....

press the button click.

 

[yo3ggx]

To get or set the desired element, you can use this B4X routine.

This is what I already did. The problem is that I just got a snapshot of the dynamic image from the moment the procedure was run. What I want is to get the dynamic image and display it on a canvas in my app, not in the WebView (which is not even added to the activity). I can do this by polling, but for sure will not be in sync with the updates in the web page.
How I can call a sub in B4A when the image from the web page is updated?

 

[TILogistic]

This is what I already did. The problem is that I just got a snapshot of the dynamic image from the moment the procedure was run. What I want is to get the dynamic image and display it on a canvas in my app, not in the WebView (which is not even added to the activity). I can do this by polling, but for sure will not be in sync with the updates in the web page.
How I can call a sub in B4A when the image from the web page is updated?

post a small example of what you want to do, so they can help you.

If you capture the url of the image that is encoded in base64 you just have to convert it (binary) and display it wherever you want.

To update the page or web element you have to convert the image to base64 with B4X or through javascrits

 

[yo3ggx]

post a small example of what you want to do, so they can help you.

This is what I did in my initial and second post.
What is working: extracting the bitmap in png format and display it on a Canvas in my app.
What I don't know how to do: Create some kind of callback when the image is updated on the web page, to dynamically and synchronously update the image on my canvas (without using async polling).

 

[TILogistic]

This is what I did in my initial and second post.
What is working: extracting the bitmap in png format and display it on a Canvas in my app.
What I don't know how to do: Create some kind of callback when the image is updated on the web page, to dynamically and synchronously update the image on my canvas (without using async polling).

where is the website and how do you access it if you don't use webview?

What parameters do you have to know if the image is updated on the web page?

 

[yo3ggx]

where is the website and how do you access it if you don't use webview?

What parameters do you have to know if the image is updated on the web page?

I think is a misunderstanding. Of course I access it using a Webview, but that WebView is not added to the Activity (with Activity.AddView(WebView1,l,t,w,h)). Is just initialized and configured. I want the dynamic image from the web page to be displayed in a canvas in my app, without displaying the full WebView. Currently I can only display a snapshot of that image.

 

[TILogistic]

You now know how to capture the image of the web page element.

Now you want to know how to update the image (bitmap) from the one you captured (html) when the image changes on the web.

The question.
What web page parameters do you know that can tell you that the image has changed?

 

[TILogistic]

The only way to know if the image on the web page has changed is by adding or injecting an event with addEventListener.

 

[yo3ggx]

The only way to know if the image on the web page has changed is by adding or injecting an event with addEventListener.

How can I do that? I am not aware of any parameter that can tell you the image was changed.

 

[TILogistic]

see the following post, how javascript functions are executed

capture video screenshot in webview

hi.. I am playing video in webview. when i take a screenshot it turns black. Does this mean that you can't capture screenshots in videos? ...................... Bmp.Initialize3(WebViewExtras1.CaptureBitmap) Dim Out As OutputStream Out =...

www.b4x.com

It can be a guide to add an "onload" event (addEventListener) of images

 

[yo3ggx]

see the following post, how javascript functions are executed

If I try the example from webnew2.zip, I can see the video on top when clicking on play, I can capture a screenshot, bot not live video.
In your example you create a canvas with the screenshot. In my case I have the canvas which is dynamically updated.

 

[TILogistic]

see: (addEventListener)

Detect which element is pressed on webview?

Using webextras, can you detect when a certain element on a webview is pressed?

www.b4x.com

search:

Search Results

www.b4x.com

and search the internet for what event or method can indicate if the image changed on the web page.
Ref: Onload (may be a start)

 

[yo3ggx]

There is no event triggered by a canvas draw. Onload event is not triggered.
As I'm not displaying the WebView anyway, there is any possibility to redirect canvas updates from the webview to my own to canvas?
or (I'm thinking loud)
I can crop the WebView to show only the desired canvas?

 

[yo3ggx]

It looks like polling is fast enough for my needs even on older Android versions (5.0), so for the moment I will use this approach.
For very low performance and old devices, I can decrease the quality of the downloaded image from 1 to 0.5.