如何在 Xamarin Forms 中合并两个图像？

Question

我正在开发一个 Xamarin Forms iOS 应用程序。在 xaml 文件中，有一个网格。

<Grid x:Name="QrCodeSite" HeightRequest="300" Margin="37, 37, 37, 0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
</Grid>

在相关的 .cs 文件中，我使用ZXing.Net.Mobile.Forms 生成一个二维码并将其放置在网格中。我把我的标志放在同一个网格中，最终会出现在二维码的中心。

var barcode = new ZXingBarcodeImageView
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand
};
barcode.BarcodeFormat = ZXing.BarcodeFormat.QR_CODE;
barcode.BarcodeOptions.Width = 650;
barcode.BarcodeOptions.Height = 650;
barcode.BarcodeOptions.Margin = 1;
barcode.BarcodeValue = value;


var img = new Image
{
Source = "logo.png",
WidthRequest = 70,
HeightRequest = 70,
VerticalOptions = LayoutOptions.Center,
HorizontalOptions = LayoutOptions.Center
};

QrCodeSite.Children.Clear();

QrCodeSite.Children.Add(barcode);
QrCodeSite.Children.Add(img);

问题是，可能是我的手机（iPhone 6s plus）太慢了，有时标志先出现，然后延迟（大约 1 秒）后显示二维码。如何将 QR 码和徽标合并为一张图像，然后将其添加到网格中？

Answer 1

您可以使用 SkiaSharp 显示图像或合并图像。看看如何Display SkiaSharp bitmaps 下载示例项目来研究它。

基于Drawing on existing bitmaps参考，你可以修改如下：

public partial class MonkeyMoustachePage : ContentPage
{
    SKBitmap monkeyBitmap;

    public MonkeyMoustachePage()
    {
        Title = "Monkey Moustache";

        monkeyBitmap = BitmapExtensions.LoadBitmapResource(GetType(),
            "SkiaSharpFormsDemos.Media.MonkeyFace.png");

        SKBitmap iconImage = BitmapExtensions.LoadBitmapResource(GetType(),
            "SkiaSharpFormsDemos.Media.GooglePlaylogo.png");

        int offset = monkeyBitmap.Width / 2 - iconImage.Width / 2;
        int offsetTop = monkeyBitmap.Height / 2 - iconImage.Height / 2;
        // Create canvas based on bitmap
        using (SKCanvas canvas = new SKCanvas(monkeyBitmap))
        {
            canvas.DrawBitmap(iconImage, SKRect.Create(offset, offsetTop, iconImage.Width, iconImage.Height));
        }

        // Create SKCanvasView to view result
        SKCanvasView canvasView = new SKCanvasView();
        canvasView.PaintSurface += OnCanvasViewPaintSurface;
        Content = canvasView;

        //save the new image
        using (MemoryStream memStream = new MemoryStream())
        using (SKManagedWStream wstream = new SKManagedWStream(memStream))
        {
            monkeyBitmap.Encode(wstream, imageFormat, quality);
            byte[] data = memStream.ToArray();

            // Check the data array for content!

            bool success = await DependencyService.Get<IPhotoLibrary>().SavePhotoAsync(data, folder, filename);

            // Check return value for success!
         }
    }

    void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();
        canvas.DrawBitmap(monkeyBitmap, info.Rect, BitmapStretch.Uniform);
    }
}

然后您会看到一个徽标图标将显示在原始图像中：

如果您想将 SkiaSharp 位图保存到文件中，请查看：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/graphics/skiasharp/bitmaps/saving#exploring-the-image-formats

注意：BitmapExtensions.cs 文件来自示例项目。顺便说一下，在将图像添加到项目时，您需要将图像的 Build ACtion 设置为 Embedded resource。如下：