Windows Phone實用開發技巧（36）：儲存WebBrowser中的圖片

有時候，我們需要在Windows Phone應用中使用WebBrowser控制項來顯示網頁內容，在之前的博文《Windows Phone 中WebBrowser開啟新視窗》中講了如何在WebBrowser中開啟新的視窗，今天來講一下如何讓使用者儲存網頁中的圖片。

其實思路跟上一篇文章一樣，不同的是我們將圖片從WebBrowser中拿出來了，具體的思路如下:

1. 將WebBrowser的Source設定為一個帶有圖片的url，並且將IsScriptEnabled設為True註冊其ScriptNotify事件

2. 在WebBrowser的LoadCompleted中注入綁定的JavaScript代碼，目的是將使我們點擊IMG標籤時能夠執行我們預定義的函數

3. 在ScriptNotify中截獲WebBrowser中的事件，如果是圖片點擊，則Popup中顯示該圖片

4. 使用XNA庫方法儲存圖片

 

ok，首先我們在頁面中放置一個WebBrowser

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

然後在頁面建構函式中設定它的Source為帶有圖片的地址

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為後續儲存圖片時使用的彈出面板

在WebBrowser的LoadCompleted中注入綁定的JavaScript代碼

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("頁面載入完成");}

註冊了兩個函數，一個是用於綁定連結，一個用於處理使用者點選連結。並且移除尾碼為gif的圖片。下面看看我們如何在ScriptNotify中處理圖片點擊事件：

private void webBrowser_ScriptNotify(object sender, NotifyEventArgs e){    string input = e.Value.ToString();    if (Regex.IsMatch(input, @"http://[^\[^>]*?(gif|jpg|png|jpeg|bmp|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 = "儲存圖片",            Height = 80,            Width = 200,            Margin = new Thickness(48),            VerticalAlignment = 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;    }}

使用Regex判斷當前跳轉的url是不是一個合法的圖片，如果是截獲下來並建立一個彈出層，顯示圖片，

儲存方法很簡單：

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("儲存圖片成功");    }    catch    {        MessageBox.Show("儲存圖片失敗");    }    finally    {        ms.Close();    }}

 

原始碼新浪微盤下載