如何将CanvasControl的内容添加到MediaClip

如何解决如何将CanvasControl的内容添加到MediaClip

我正在创建一个uwp应用，其中用户输入的文本将转换为视频叠加层。用户加载视频，在文本中输入内容，使用文本获取视频预览，然后可以将其视频与覆盖图一起保存。 目前，它适用于图像叠加层，但不适用于文本。我正在尝试使用win2d设置文本格式。但是，我不知道如何将win2d画布控件放入windows.media.editing媒体剪辑中。

我以为我可以去CanvasControl>某种位图>图像> MediaClip，但是只能通过存储文件或直接3d曲面创建媒体剪辑。任何东西都会有所帮助！这是我第一次尝试在游戏引擎之外编写内容。

当前将画布控件转换为位图的部分：

private async void btnAddOverlay_Click(object sender,RoutedEventArgs e)
        {

            var bitmap = new rendertargetBitmap();
            await bitmap.RenderAsync(canvasControl);
            IBuffer pixelBuffer = await bitmap.GetPixelsAsync();
            byte[] pixels = pixelBuffer.ToArray();
            SoftwareBitmap outputBitmap = SoftwareBitmap.CreatecopyFromBuffer
            (
                pixelBuffer,BitmapPixelFormat.Bgra8,bitmap.PixelWidth,bitmap.PixelHeight
            );
        }

将图像叠加层添加到视频的旧部分。 （overlayImageFile是存储文件。我只是不知道如何将outputBitmap转换为存储文件以从中制作媒体剪辑。）

private async void CreateOverlays()
        {
            // Create a clip from video and add it to the composition
            var baseVideoClip = await MediaClip.CreateFromFileAsync(pickedFile);
            composition = new MediaComposition();
            composition.Clips.Add(baseVideoClip);

            // Create a clip from image
            var overlayImageClip = await MediaClip.CreateFromImageFileAsync(overlayImageFile,timeSpan);

            // Put image in upper left corner,retain its native aspect ratio
            Rect imageOverlayPosition;
            imageOverlayPosition.Height = mediaElement.ActualHeight / 3;
            imageOverlayPosition.Width = (double)imageBitmap.PixelWidth / (double)imageBitmap.PixelHeight * imageOverlayPosition.Height;
            imageOverlayPosition.X = 0;
            imageOverlayPosition.Y = 0;

            // Make the clip from the image an overlay
            var imageOverlay = new MediaOverlay(overlayImageClip);
            imageOverlay.Position = imageOverlayPosition;
            imageOverlay.Opacity = 0.8;

            // Make a new overlay layer and add the overlay to it
            var overlayLayer = new MediaOverlayLayer();
            overlayLayer.Overlays.Add(imageOverlay);
            composition.OverlayLayers.Add(overlayLayer);

            //Render to MediaElement
            mediaElement.Position = TimeSpan.Zero;
            mediastreamsource = composition.GeneratePreviewmediastreamsource((int)mediaElement.ActualWidth,(int)mediaElement.ActualHeight);
            mediaElement.Setmediastreamsource(mediastreamsource);
            txbNotification.Text = "Overlay creaeted";
        }

Windows MediaClip类：https://docs.microsoft.com/en-us/uwp/api/windows.media.editing.mediaclip?view=winrt-19041

解决方法

我只是不知道如何将outputBitmap转换为存储文件以从中制作媒体剪辑。

获取RenderTargetBitmap后，无需转换为SoftwareBitmap。您可以通过BitmapEncoder将像素数据以指定的格式存储为文件。这是方法：

private async void btnAddOverlay_Click(object sender,RoutedEventArgs e)
{
    RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
    await renderTargetBitmap.RenderAsync(canvasControl);

    var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();
    var pixels = pixelBuffer.ToArray();
    var displayInformation = DisplayInformation.GetForCurrentView();

    // Create the file in local folder
    var file = await ApplicationData.Current.LocalFolder.CreateFileAsync("TempCanvas.png",CreationCollisionOption.ReplaceExisting);
    
    // Write data
    using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
    {
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId,stream);
        encoder.SetPixelData(BitmapPixelFormat.Bgra8,BitmapAlphaMode.Premultiplied,(uint)renderTargetBitmap.PixelWidth,(uint)renderTargetBitmap.PixelHeight,displayInformation.RawDpiX,displayInformation.RawDpiY,pixels);
        await encoder.FlushAsync();
    }
}

在需要时，您可以使用以下代码获取保存的图片：

var file = await ApplicationData.Current.LocalFolder.GetFileAsync("TempCanvas.png");

,

这是另一种可能的方式

如果您使用的是win2d，则可以使用

MediaClip.CreateFromSurface（IDirect3DSurface，TimeSpan）函数和

您可以将画布渲染目标直接传递给此方法

这样，您不必将位图保存到文件中

所以您必须创建一个离线画布设备 然后是画布渲染目标 然后在上面画文字 然后将该渲染目标传递给函数 它将生成用于叠加的媒体剪辑