如何在 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生成了一个二维码，并将其放置在网格中。并且我把我的logo放在同一个格子里，最后会出现在二维码的中央。

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

问题是，也许我的phone (iPhone 6s plus) 太慢了，有时会先出现徽标，然后在延迟（大约 1 秒）后显示二维码。如何将二维码和徽标合并为一张图片，然后将其添加到网格中？

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设置为嵌入资源。如下：

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

How to merge two image in Xamarin Forms?

image

image-processing

zxing

xamarin

xamarin.forms