Android Question Save web view chart to image[SOLVED]

carloz · Oct 10, 2015

hello all,

I have a html page with displaying a chart .. the requirement is to capture some data from the page, save the chart to image and create a pdf. Creating the pdfs using Pdfwriter is a breeze , so no worries there..

I tried using web view.capturebitmap and it works perfectly well..but it captures the whole html page, i need to capture only the chart from the page..

any ideas on how to go about doing this with webviewxtras?

regards
carloz

inakigarm · Oct 10, 2015

How is the chart referenced in the html page ?? Do you have access to server or to image's path at server?

I'm thinking about 3 possible choices:
- Downloading image via http job (parsing the html page to find image URL)
- Somewhat javascript code to extract the html element corresponding to image
- Capturing via canvas the webview image

carloz · Oct 10, 2015

hello imakigarm,

first & second points wont work....currently theres no image to download...the chart(highcharts plugin) is using svg
see this link for sample
http://baytreedigital.com/Pramod/TestSite1/savechart1.html

capturing via cavas seems to be the best route to take.. im able to convert the svg to image..highcharts itself has a export png function...the trick would be to save the image to device without user intervention ..

any thoughts on how to do that?

regards
carloz

inakigarm · Oct 10, 2015

If you look at the html code, you can see that the export chart is a javascript function; you can use to access this function with WebViewExtras that exposes javascript functions and elements to B4A and save to the SD device
Look at https://www.b4x.com/android/forum/threads/how-to-programmatically-click-a-web-button.55660/page-2 Post 24; the javascript element of your HTML page that select the chart image type is document.getElementById("ExportOption")

carloz · Oct 10, 2015

ok ..i will try this out... i am using webviewxtras to create and execute javascripts in html pages for my app currently...im just not sure if the exportoption will allow me to save directly to sd card...

thnx for replying..will check it out and revert..

regards
carloz

inakigarm · Oct 10, 2015

I've open the webpage from my phone and clicking the export function the image saves to SD; as webextras exposes javascript functions and elements, you can execute a
.executeJavascript to execute the click function on the Export button (see the html code page annexed)

B4X:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Highcharts Demo - jsFiddle demo</title>
 
 
  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
 
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
 
 
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
 
  <style type='text/css'>
   
  </style>
 



<script type='text/javascript'>//<![CDATA[

$(function () {
    var chart = new Highcharts.Chart({
       
        chart: {
            renderTo: 'container',
            zoomType: 'x'
        },
       
        credits: {
            enabled: false
        },
        subtitle: {
            text: 'Click and drag in the plot area to zoom in'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
       
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]       
        }],
       
        navigation: {
            buttonOptions: {
                enabled: false
            }
        }   
    });
   
    // the button handler   
    $('#buttonExport').click(function() {
        var e = document.getElementById("ExportOption");
        var ExportAs = e.options[e.selectedIndex].value;  
       
        if(ExportAs == 'PNG')
        {
            chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
        }
        if(ExportAs == 'JPEG')
        {
            chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
        }
        if(ExportAs == 'PDF')
        {
            chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
        }
        if(ExportAs == 'SVG')
        {
            chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
        }
    });

    $('#buttonPrint').click(function() {
        chart.setTitle(null, { text: ' ' });
        chart.print();
        chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
    });
});
//]]>

</script>

</head>
<body>
  <script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 300px; margin-top: 1em"></div>
<select id="ExportOption">
  <option value="PNG">PNG Image</option>
  <option value="JPEG">JPEG Image</option>
  <option value="PDF">PDF Document</option>
  <option value="SVG">SVG Vector Image</option>
</select>




<button id="buttonExport">Export chart</button><button id="buttonPrint">Print chart</button>



 
</body>

</html>

carloz · Oct 10, 2015

you lost me there
i opened the page in my device browser..clicked on the export button.. it did not save the image to sd card..
tried the same in webview ..same result...what am in missing here?

inakigarm · Oct 10, 2015

Well, I've only Chrome as a browser in my device (Moto G 2014 kit kat) and I can save the images without problems; I've no PC here and I can't try with B4A and WebviewExtended for the moment...

carloz · Oct 10, 2015

wow...i just tried with chrome on my device and it did download the image to sd card!!!...
am attaching a sample b4a project .. will you try it out if you get the time ?

regards
carloz

edit -- replaced project file

inakigarm · Oct 11, 2015

Tested it, but doesn't work even clicking on button (changed executejavascript to :

B4X:

WebView1e.executeJavascript(WebView1,"document.getElementById('buttonExport').click(function()" & _
    " {chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});" & _
    "});")

It seems that B4A Webview is not able to download a file (found an forum entry https://www.b4x.com/android/forum/threads/webview-cant-download-file.38708/#content related to that)

carloz · Oct 11, 2015

right ...same happens on my device too... now theres no url for the image , so i guess we are stumped with downloading the image from webview..
if any one else can think of something..plz post.

regards
carloz

inakigarm · Oct 11, 2015

Another option is modify the html page with highchart results to expose the download chart image URL http://hemant-uniquescience.blogspot.in/2014/01/highchart-get-image-url-after-exporting.html#more and :
- Parse the html, open this URL into webview and use capturebitmap
- or use httputils to download this image

carloz · Oct 11, 2015

yes..that seems the only way to go about it now...
thnx inakigarm for all the help.....

regards
carloz

Mark Read · Oct 11, 2015

Ever had one of those days where a little problem does not leave you alone? I thought a lot about this and can offer you this solution ... its not perfect but it seems to work.

Using your code from Post#9

Change

B4X:

Sub Button1_Click
    Button1.Visible=False
    WebView1e.executeJavascript(WebView1,"document.getElementById('buttonExport').style.visibility = 'hidden';")
    WebView1e.executeJavascript(WebView1,"document.getElementById('ExportOption').style.visibility = 'hidden';")
    WebView1e.executeJavascript(WebView1,"document.getElementById('buttonPrint').style.visibility = 'hidden';")

    TakeScreenShot
    Button1.Visible=True
End Sub

and add Reflection library and this code

B4X:

Sub TakeScreenShot
    ' Take a screenshot.
    Dim Obj1, Obj2 As Reflector
    Dim bmp As Bitmap
    Dim c As Canvas
    Obj1.Target = Obj1.GetActivityBA
    Obj1.Target = Obj1.GetField("vg")
    bmp.InitializeMutable(Activity.Width, Activity.Height)
    c.Initialize2(bmp)
    Dim args(1) As Object
    Dim types(1) As String
    Obj2.Target = c
    Obj2.Target = Obj2.GetField("canvas")
    args(0) = Obj2.Target
    types(0) = "android.graphics.Canvas"
    Obj1.RunMethod4("draw", args, types)
    Dim Out As OutputStream
    Out = File.OpenOutput(File.DirRootExternal, "myimage.png", False)
    bmp.WriteToStream(Out, 100, "PNG")
    Out.Close
   
    Log("Image saved")
End Sub

All I have done is turn off all controls and take a screenshot. The chart is stored in ElementByID('container') but I cannot acces it.

carloz · Oct 11, 2015

hi mark35at,

this would be a perfect solution !!! .. i just tried it on my device...the buttons are hidden.. but the screenshot still contains them ..maybbe the screenshot is taken before they are hidden?
see screenshot...

we are almost there...

carloz · Oct 11, 2015

hi again...

all it needed was a wait... attached project...
thnx everyone ...

regards
carloz

Android Question Save web view chart to image[SOLVED]

carloz

Member

inakigarm

Well-Known Member

carloz

Member

inakigarm

Well-Known Member

carloz

Member

inakigarm

Well-Known Member

carloz

Member

inakigarm

Well-Known Member

carloz

Member

Attachments

inakigarm

Well-Known Member

carloz

Member

inakigarm

Well-Known Member

carloz

Member

Mark Read

Well-Known Member

carloz

Member

Attachments

carloz

Member

Attachments

Similar Threads

Android Question Save web view chart to image[SOLVED]

Member

Well-Known Member

Member

Well-Known Member

Member

Well-Known Member

Member

Well-Known Member

Member

Attachments

Well-Known Member

Member

Well-Known Member

Member

Well-Known Member

Member

Attachments

Member

Attachments

Similar Threads

Privacy & Transparency

Privacy & Transparency