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;

// Constructor
public 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;
    }
}

使用正則表達式判斷當前跳轉的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();
    }
}

 

源代碼新浪微盤下載