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

Question

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

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

但在我的场景中，现在我在不同的地方有两个不同的网格及其相应的像素 (byte[])。那么我怎样才能将这些图像（从左到右）合并为一个，以执行第二步，只保存一个更大的图像，其中前两个图像在里面？

Answer 1

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

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

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

How to concat two images programatically using UWP

c#

bitmap

uwp