イメージにテキストを描画し、UWPを使用して保存する方法（Windows 10の場合）

Question

UWP（Windows 10の場合）のテンプレートイメージにテキストを描画してから、イメージを保存できるようにします印刷するか共有する）。

私はキャンバスコントロール、さらには、ナゲットのWin2Dパッケージで遊んだことがあります。これを行うための最善の方法が何であるかについての示唆は高く評価されます。私が中止した箇所のサンプルコードは以下の通りです。

XAML

<Page 
x:Class="DrawTextExample.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:DrawTextExample" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 
mc:Ignorable="d"> 

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Button Name="btnSaveImage" Content="Save the image" Margin="10" Click="btnSaveImage_Click" /> 

    <Grid Name="MyCreatedImage"> 
     <Image Name="imgName" Stretch="UniformToFill" Source="Assets/HelloMyNameIs.jpg" /> 
     <TextBlock Name="lblName" Text="McFly" Margin="20,100,20,20" FontSize="36"/> 
    </Grid> 
</StackPanel> 

コード

using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media.Imaging; 

namespace DrawTextExample { 
    public sealed partial class MainPage : Page 
    { 
     public MainPage() 
     { 
      this.InitializeComponent(); 
     } 

     private async void btnSaveImage_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e) { 
      var bitmap = new RenderTargetBitmap(); 
      await bitmap.RenderAsync(MyCreatedImage); 
     } 
    } 
} 

画像（HelloMyNameIs.jpg）

の後ろ

Answer 1

UWP（Windows 10）のテンプレートイメージにテキストを描画してから、イメージを保存して（印刷したり共有できるように）したいと考えています。

コードスニペットによれば、あなたの要件を満たすRenderTargetBitmapを使用しようとしています。このクラスでは、TextBlockのImageを1つの画像にまとめてレンダリングできます。コードスニペットでは保存が不十分です。次のようにレンダリングされた画像を保存することができます：

private async void btnSaveImage_Click(object sender, RoutedEventArgs e) 
{ 
    RenderTargetBitmap bitmap = new RenderTargetBitmap(); 
    await bitmap.RenderAsync(MyCreatedImage); 

    var pixelBuffer = await bitmap.GetPixelsAsync(); 
    var pixels = pixelBuffer.ToArray(); 
    var displayInformation = DisplayInformation.GetForCurrentView(); 
    StorageFolder pictureFolder = KnownFolders.SavedPictures; 
    var file = await pictureFolder.CreateFileAsync("test2.jpg", CreationCollisionOption.ReplaceExisting); 
    using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
    { 
     var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.JpegEncoderId, stream); 
     encoder.SetPixelData(BitmapPixelFormat.Bgra8, 
          BitmapAlphaMode.Premultiplied, 
          (uint)bitmap.PixelWidth, 
          (uint)bitmap.PixelHeight, 
          displayInformation.RawDpiX, 
          displayInformation.RawDpiY, 
          pixels); 
     await encoder.FlushAsync(); 
    } 
} 

ます。また、推奨されるWin2Dを使用しようとするかもしれません。あなたはイメージを描画し、テキストを描画し、必要に応じて図形を描くことができます。結果を保存する方法はCanvasBitmap.SaveAsyncです。たとえば、次のデモでは、画像にテキストを描画して画像フォルダに保存する方法を示しました。

Uri imageuri = new Uri("ms-appx:///Assets/HelloMyNameIs.jpg"); 
StorageFile inputFile = await StorageFile.GetFileFromApplicationUriAsync(imageuri); 
BitmapDecoder imagedecoder; 
using (var imagestream = await inputFile.OpenAsync(FileAccessMode.Read)) 
{ 
    imagedecoder =await BitmapDecoder.CreateAsync(imagestream); 
} 
CanvasDevice device = CanvasDevice.GetSharedDevice(); 
CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, imagedecoder.PixelWidth, imagedecoder.PixelHeight, 96); 
using (var ds = renderTarget.CreateDrawingSession()) 
{ 
    ds.Clear(Colors.White); 
    CanvasBitmap image = await CanvasBitmap.LoadAsync(device, inputFile.Path, 96); 
    ds.DrawImage(image); 
    ds.DrawText(lblName.Text, new System.Numerics.Vector2(150, 150), Colors.Black); 
} 
string filename = "test1.png"; 
StorageFolder pictureFolder = KnownFolders.SavedPictures; 
var file = await pictureFolder.CreateFileAsync(filename, CreationCollisionOption.ReplaceExisting); 
using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) 
{ 
    await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f); 
} 

あなたがイメージ上の人格のテキスト描画をしたい場合は、DrawInkにInkCanvasを使用して検討することができます。詳細はthis threadを参照してください。