如何使用 UWP 以编程方式连接两个图像答案

【问题标题】：How to concat two images programatically using UWP如何使用 UWP 以编程方式连接两个图像
【发布时间】：2020-07-18 20:27:07
【问题描述】：

我可以使用以下方法在我的应用程序中获取网格图像：

RenderTargetBitmap rtb_grid = new RenderTargetBitmap();
await rtb_grid.RenderAsync(grid);
var grid_pixel_buffer = await rtb_grid.GetPixelsAsync();
var grid_pixels = grid_pixel_buffer.ToArray();

而且我知道我可以使用以下方法将其保存到外部文件（在本例中为流）：

var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
encoder.SetPixelData(BitmapPixelFormat.Bgra8,
       BitmapAlphaMode.Premultiplied,
       (uint)rtb_grid.PixelWidth,
       (uint)rtb_grid.PixelHeight,
       displayInformation.RawDpiX,
       displayInformation.RawDpiY,
       grid_pixels);

但在我的场景中，现在我在不同的地方有两个不同的网格以及它们对应的像素（字节 []）。那么如何将这些图像（从左到右）合并为一个，以执行第二步，只保存一个更大的图像，前两个在里面？

【问题讨论】：

我对“执行第二步只保存一个更大的图像，前两个在里面”有点困惑。联系这两张图片后，要保存合并的一张吗？您能否提供有关您预期行为的更多详细信息？
我的意思是一个更大的图像，里面有另外两个。就像创建一个适合双方的更大图片。

标签： c# uwp bitmap

【解决方案1】：

要以编程方式拼接两个图像，可以尝试使用Win2D 方法来实现。首先在两个图像的总大小之间创建一个 CanvasRenderTarget，然后用字节将这两个图像绘制到它上面。之后，将其保存到您的文件中。例如：

.xaml:

<StackPanel>
    <Grid x:Name="ImageA">
        <Image  Source="Assets/StoreLogo.png"></Image>
    </Grid>
    <Grid x:Name="ImageB">
        <Image  Source="Assets/3.jpg"></Image>
    </Grid>
</StackPanel>

.cs:

public async void SaveImage() 
{
    RenderTargetBitmap rtb_grid = new RenderTargetBitmap();
    await rtb_grid.RenderAsync(ImageA);
    var grid_pixel_buffer = await rtb_grid.GetPixelsAsync();
    byte[] grid_pixels = grid_pixel_buffer.ToArray();

    RenderTargetBitmap rtb_grid2 = new RenderTargetBitmap();
    await rtb_grid2.RenderAsync(ImageB);
    var grid_pixel_buffer2 = await rtb_grid2.GetPixelsAsync();
    byte[] grid_pixels2 = grid_pixel_buffer2.ToArray();

    StorageFile destinationFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("MyImge.png", CreationCollisionOption.ReplaceExisting);
    CanvasDevice device = CanvasDevice.GetSharedDevice();

    CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)(rtb_grid.PixelWidth + rtb_grid2.PixelWidth), Math.Max(rtb_grid.PixelHeight, rtb_grid2.PixelHeight), 96);
           
    using (var ds = renderTarget.CreateDrawingSession())
    {
        ds.Clear(Colors.White);
        var image = CanvasBitmap.CreateFromBytes(device, grid_pixels,rtb_grid.PixelWidth,rtb_grid.PixelHeight, DirectXPixelFormat.B8G8R8A8UIntNormalized);
        ds.DrawImage(image,0,0);
                
        var image2 = CanvasBitmap.CreateFromBytes(device, grid_pixels2, rtb_grid2.PixelWidth, rtb_grid2.PixelHeight, DirectXPixelFormat.B8G8R8A8UIntNormalized);
        ds.DrawImage(image2, (float)rtb_grid.PixelWidth, 0);
    }      

    using (var fileStream = await destinationFile.OpenAsync(FileAccessMode.ReadWrite))
    {
        await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);
    }
}

【讨论】：