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();
    }
}