Xamarin在Webview上形成标签如水印

如何解决Xamarin在Webview上形成标签如水印

enter image description here

enter image description here 如何在Xamarin Forms中的Webview上给（label.text）加水印？

解决方法

您要获得如下屏幕截图那样的结果吗？

如果是这样，则应该通过自定义渲染器实现。 url加载完成后，我们应该添加一个JS来实现waterMark。我建议您使用addWaterMarker()方法，它不会使Webview失去焦点。

[assembly: ExportRenderer(typeof(WebView),typeof(MyWebviewRenderer))]
namespace WebviewCoverDemo.Droid
{
    public class MyWebviewRenderer: WebViewRenderer
    {
        Context context;
        public MyWebviewRenderer(Context context):base(context)
        {
            this.context = context;
        }
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            Control.Settings.JavaScriptEnabled = true;
            Control.SetWebViewClient(new MyWebviewClient());
        }
    }

    internal class MyWebviewClient : Android.Webkit.WebViewClient
    {
        bool showDiv = false;

        public override void OnPageFinished(Android.Webkit.WebView view,string url)
        {
            base.OnPageFinished(view,url);
            view.LoadUrl("javascript:" + (showDiv ? addWaterMarkerDiv("ss")
                                    : addWaterMarker("body background")));
        }

        string addWaterMarker(string watermark)
        {
            string js = "var newscript = document.createElement(\"script\");";
            js += "var bbTextNode = document.createTextNode(\"";
            js += "var can = document.createElement('canvas');";
            js +=
                "var body = document.body;body.appendChild(can);can.width=400; can.height=400;can.style.display='none';"
                    + "var cans = can.getContext('2d');cans.rotate(-20*Math.PI/180);cans.font = '46px Microsoft JhengHei';"
                    + "cans.fillStyle = 'rgba(255,0.50)';cans.textAlign = 'left';"
                    + "cans.textBaseline = 'Middle';cans.fillText('watermark',can.width/3,can.height/2);"
                    + "body.style.backgroundImage='url('+can.toDataURL('image/png')+')';"
            ;
            js += "\");";
            js += "newscript.appendChild(bbTextNode);";
            //js += "var t = document.createTextNode(\"alert('action');\");";
            //js += "newscript.appendChild(t);";
            //js += "newscript.onload=function(){xxx();};";  //xxx()代表js中某方法
            js += "document.body.appendChild(newscript);";

            return js;
        }

        string addWaterMarkerDiv(string watermark)
        {
            string js = "var newscript = document.createElement(\"script\");";

            js += "var waterMarkDiv = document.createTextNode(\""
                //+"if(document.getElementById('waterMark') != null) return;"
                + "var m = 'waterMark';"
                + "var newMark = document.createElement('div');"
                + "newMark.id = m;"
                + "newMark.style.position = 'absolute';"
                + "newMark.style.zIndex = '9527';"
                + "newMark.style.top = '0px';"
                + "newMark.style.left = '0px';"
                + "newMark.style.width = '800px';"
                + "newMark.style.height = '400px';"
                //+ "alert('newmark');"
                + "\");"
            ;

            js += "newscript.appendChild(waterMarkDiv);";
            js += "var bbTextNode = document.createTextNode(\"";
            js += "var can = document.createElement('canvas');";
            js +=
                "var body = document.body;body.appendChild(can);can.width=400; can.height=400;can.style.display='none';"
                    + "var cans = can.getContext('2d');cans.rotate(-20*Math.PI/180);cans.font = '46px Microsoft JhengHei';"
                    + "cans.fillStyle = 'rgba(17,17,can.height/2);"
                    + "newMark.style.backgroundImage='url('+can.toDataURL('image/png')+')';"
                    + "newMark.style.filter = 'alpha(opacity=50)';"
                    + "document.body.appendChild(newMark);"
            ;
            js += "\");";
            js += "newscript.appendChild(bbTextNode);";
            js += "document.body.appendChild(newscript);";

            return js;
        }
    }
}