feat(android): softwareRendering property for WebView

[m1ga]

Issue

Capturing a screenshot of a webview with local content (e.g. GraphJS) will capture an empty webview. External URLs work fine.
iOS does capture local content without issues.

Solution

Setting the WebView into software rendering mode will make the data appear again. Previously it was done by setting a border or transparent background. As these methods don't work and would lead to visual differences I've added a .softwareMode = true|false property.

Test

var win = Ti.UI.createWindow({});
var btn = Ti.UI.createButton({title:"click"});
var img = Ti.UI.createImageView({bottom:0,height:200,borderWidth:1,borderColor:"red",width: 100});
var html =`<div style="height:150px">
	<canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{label: '# of Votes',data: [12, 19, 3, 5, 2, 3],borderWidth: 1}]
    },
    options: {
      animation: {duration: 0},
      scales: {y: {beginAtZero: true}}
    }
  });
</script>`;

var webview = Ti.UI.createWebView({top: 0, height: 200, softwareMode:true, html:html});
win.add([btn, img,webview]);
win.open();
win.addEventListener("open", function(){
	// webview.softwareMode = true; // or here
	console.log(webview.softwareMode)
})
btn.addEventListener("click", function(){
	Ti.Media.takeScreenshot(function(e){
		img.image = e.media;
	});
})

Workaround

Using Hylerloop to set it:

const WebView = require("android.webkit.WebView");
const View = require("android.view.View");

// this should be in open or your screenshot method
var webView = new WebView($.webview);
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);