Practical development tips for Windows Phone (36): save images in WebBrowser

Sometimes, we need to use the WebBrowser control in the Windows Phone application to display webpage content, in the previous blog "WebBrowser in Windows Phone opens a new window", we talked about how to open a new window in WebBrowser. Today we will talk about how to let users save images on webpages.

In fact, the idea is the same as that in the previous article. The difference is that we have taken the image out of WebBrowser. The specific idea is as follows:

1. Set the Source of WebBrowser to a url with an image, and set IsScriptEnabled to True to register its scriptpolicy event.

2. Inject the bound JavaScript code into the LoadCompleted of WebBrowser, so that we can execute our predefined function when clicking the IMG tag.

3. Events in WebBrowser are intercepted in ScriptNotify. If an image is clicked, the image is displayed in the Popup.

4. Use the XNA library method to save images

 

OK. First, we place a WebBrowser in the page.

<phone:WebBrowser x:Name="webBrowser" LoadCompleted="webBrowser_LoadCompleted" IsScriptEnabled="True" ScriptNotify="webBrowser_ScriptNotify" />

In the page constructor, set its Source to the address with an image.

private Popup popUp;// Constructorpublic MainPage(){    InitializeComponent();    webBrowser.Source = new Uri("http://images.baidu.com/i?ct=201326592&cl=2&lm=-1&st=-1&tn=baiduimage&istype=2&fm=index&pv=&z=0&word=404&s=0", UriKind.Absolute);    popUp = new Popup();}

Popup is the pop-up panel used to save images later

Inject the bound JavaScript code in LoadCompleted of WebBrowser.

Private void webBrowser_LoadCompleted (object sender, System. windows. navigation. navigationEventArgs e) {try {webBrowser. invokeScript ("eval", @ "window. onLinkPressed = function () {var elem = event. srcElement; if (elem! = Null) {window. external. notify (elem. getAttribute ('link');} return false;} window. bindLinks = function () {var elems = document. getElementsByTagName ('img '); for (var I = 0; I <elems. length; I ++) {var elem = elems [I]; var link = elem. getAttribute ('src'); elem. setAttribute ('link', link); if(link.indexOf('.gif ')> 0) {elem. parentNode. removeChild (elem);} else {elem. attachEvent ('onmousedown ', onLinkPressed) ;}} "); webBrowser. invokeScript ("BindLinks");} catch (Exception) {throw;} MessageBox. show ("Page loaded ");}

Two functions are registered, one for binding links and the other for processing user clicks. And remove the image suffixed with gif. Next let's take a look at how we can process image click events in scriptpolicy:

Private void webbrowser_scriptpolicy (object sender, policyeventargs e) {string input = e. value. toString (); if (Regex. isMatch (input, @ "http: // [^ \ [^>] *? (Gif | jpg | png | jpeg | bmp) ") {ImageSource source = new BitmapImage (new Uri (input, UriKind. absolute); popUp. height = 800; popUp. width = 480; Grid grd = new Grid {Height = 800, Width = 480, Background = App. current. resources ["PhoneBackgroundBrush"] as SolidColorBrush, Opacity = 0.9,}; Image img = new Image {Source = source}; grd. children. add (img); Button btnSave = new Button {Content = "Save image", Height = 80, Width = 200, Margin = new Thickness (48), verticalignment = System. windows. verticalAlignment. bottom}; btnSave. click + = (e1, e2) => {SaveImage (DateTime. now. toFileTime (). toString (), img. source as BitmapImage) ;}; grd. children. add (btnSave); popUp. child = grd; popUp. isOpen = true ;}}

Use a regular expression to determine whether the current jump url is a valid image. If it is intercepted and a pop-up layer is created, the image is displayed,

The Save method is simple:

Private void SaveImage (string fileName, BitmapImage source) {MemoryStream MS = new MemoryStream (); try {MediaLibrary library = new MediaLibrary (); WriteableBitmap bitmap = new WriteableBitmap (source); Extensions. saveJpeg (bitmap, MS, bitmap. pixelWidth, bitmap. pixelHeight, 0,100); ms. seek (0, SeekOrigin. begin); ms. seek (0, SeekOrigin. current); library. savePicture (fileName, ms); ms. close (); MessageBox. show ("saved image succeeded");} catch {MessageBox. show ("failed to save image");} finally {ms. close ();}}

 

Source code download from Sina microdisk