背水一戰 Windows 10 (65) - 控件（WebView）: 對 WebView 中的內容截圖, 經過 Share Contract 分享 WebView 中的被選中的內容

時間 2019-11-17

標籤背水一戰 windows 控件 webview 內容截圖經過 share contract 分享選中欄目 Windows 简体版

原文原文鏈接

做者：webabcd

介紹
背水一戰 Windows 10 之控件（WebView）html5

對 WebView 中的內容截圖
經過 Share Contract 分享 WebView 中的被選中的內容

示例
一、演示如何對 WebView 中的內容截圖
Controls/WebViewDemo/WebViewDemo5.xamlc++

<Page
    x:Class="Windows10.Controls.WebViewDemo.WebViewDemo5"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.WebViewDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="btnCapture" Content="對此 WebView 中的當前內容截圖" Click="btnCapture_Click" Margin="5" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="5" />

            <StackPanel Margin="5" Orientation="Horizontal">
                <Image Name="imageOriginal" Width="400" Height="300" HorizontalAlignment="Left" />
                <Image Name="imageThumbnail" Width="400" Height="300" HorizontalAlignment="Left" Margin="10 0 0 0" />
            </StackPanel>

        </StackPanel>
    </Grid>
</Page>

Controls/WebViewDemo/WebViewDemo5.xaml.csweb

/*
 * WebView - 內嵌瀏覽器控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     CapturePreviewToStreamAsync() - 對 WebView 當前顯示的內容截圖，並將圖片寫入指定的流
 *     
 *     
 * 本例用於演示如何對 WebView 中的內容截圖
 */

using System;
using System.Runtime.InteropServices.WindowsRuntime;
using System.Threading.Tasks;
using Windows.Graphics.Imaging;
using Windows.Storage.Streams;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Imaging;

namespace Windows10.Controls.WebViewDemo
{
    public sealed partial class WebViewDemo5 : Page
    {
        public WebViewDemo5()
        {
            this.InitializeComponent();
        }

        private async void btnCapture_Click(object sender, RoutedEventArgs e)
        {
            // 對 WebView 中的內容截圖，並將原始圖像數據放入內存流
            InMemoryRandomAccessStream ms = new InMemoryRandomAccessStream();
            await webView.CapturePreviewToStreamAsync(ms);

            // 顯示原始截圖
            BitmapImage bitmapImage = new BitmapImage();
            bitmapImage.SetSource(ms);
            imageOriginal.Source = bitmapImage;



            // 定義縮略圖的大小（最長邊定義爲 180）
            int longlength = 180, width = 0, height = 0;
            double srcwidth = webView.ActualWidth, srcheight = webView.ActualHeight;
            double factor = srcwidth / srcheight;
            if (factor < 1)
            {
                height = longlength;
                width = (int)(longlength * factor);
            }
            else
            {
                width = longlength;
                height = (int)(longlength / factor);
            }

            // 顯示原始截圖的縮略圖
            BitmapSource thumbnail = await resize(width, height, ms);
            imageThumbnail.Source = thumbnail;
        }

        // 將指定的圖片修改成指定的大小，並返回修改後的圖片
        private async Task<BitmapSource> resize(int width, int height, IRandomAccessStream source)
        {
            WriteableBitmap thumbnail = new WriteableBitmap(width, height);
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(source);
            BitmapTransform transform = new BitmapTransform();
            transform.ScaledHeight = (uint)height;
            transform.ScaledWidth = (uint)width;
            PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Straight,
                transform,
                ExifOrientationMode.RespectExifOrientation,
                ColorManagementMode.DoNotColorManage);
            pixelData.DetachPixelData().CopyTo(thumbnail.PixelBuffer);

            return thumbnail;
        }
    }
}

二、演示如何經過 Share Contract 分享 WebView 中的被選中的內容
Controls/WebViewDemo/WebViewDemo6.xamlexpress

<Page
    x:Class="Windows10.Controls.WebViewDemo.WebViewDemo6"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.WebViewDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <Button Name="btnShare" Content="經過 Share Contract 分享 WebView 中的被選中的內容（若是沒有選中任何內容，則分享網頁地址）" Click="btnShare_Click" Margin="5" />

            <WebView Name="webView" Width="400" Height="300" Source="http://webabcd.cnblogs.com/" HorizontalAlignment="Left" Margin="5" />

        </StackPanel>
    </Grid>
</Page>

Controls/WebViewDemo/WebViewDemo6.xaml.cswindows

/*
 * WebView - 內嵌瀏覽器控件（繼承自 FrameworkElement, 請參見 /Controls/BaseControl/FrameworkElementDemo/）
 *     CaptureSelectedContentToDataPackageAsync() - 將選中的內容轉換爲 DataPackage 對象
 *     DataRequested - 分享操做開始時觸發的事件（事件參數 DataRequestedEventArgs）
 * 
 * DataRequestedEventArgs
 *     GetDeferral() - 獲取異步操做對象，同時開始異步操做，以後經過 Complete() 通知完成異步操做
 * 
 * 
 * 本例用於演示如何經過 Share Contract 分享 WebView 中的被選中的內容（若是沒有選中任何內容，則分享網頁地址）
 */

using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.WebViewDemo
{
    public sealed partial class WebViewDemo6 : Page
    {
        private DataTransferManager _dataTransferManager;

        public WebViewDemo6()
        {
            this.InitializeComponent();
        }

        private void btnShare_Click(object sender, RoutedEventArgs e)
        {
            _dataTransferManager = DataTransferManager.GetForCurrentView();
            _dataTransferManager.DataRequested += _dataTransferManager_DataRequested;

            DataTransferManager.ShowShareUI();
        }

        // 分享 WebView 中的被選中的內容
        async void _dataTransferManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
        {
            DataRequest request = args.Request;
            DataRequestDeferral deferral = args.Request.GetDeferral();

            // 若是 dataPackage 是 null 的話，則說明用戶沒有選擇任何內容
            DataPackage dataPackage = await webView.CaptureSelectedContentToDataPackageAsync();

            // 用於判斷用戶是否選中了分享內容
            bool hasSelection = false;
            try
            {
                hasSelection = (dataPackage != null) && (dataPackage.GetView().AvailableFormats.Count > 0);
            }
            catch (Exception ex)
            {
                switch (ex.HResult)
                {
                    // 沒法爲選中的內容生成 data package
                    case unchecked((int)0x80070490):
                        hasSelection = false;
                        break;
                    default:
                        throw;
                }
            }

            if (hasSelection)
            {
                dataPackage.Properties.Title = "Title（hasSelection）";
            }
            else
            {
                // 用戶沒有選擇任何內容的話，則分享網頁地址
                dataPackage = new DataPackage();
                dataPackage.SetWebLink(webView.Source);
                dataPackage.Properties.Title = "Title";
            }

            dataPackage.Properties.Description = "Description";
            request.Data = dataPackage;

            _dataTransferManager.DataRequested -= _dataTransferManager_DataRequested;

            deferral.Complete();
        }
    }
}