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을 하나의 이미지로 렌더링 할 수 있습니다. 코드 스 니펫은 저장이 부족합니다. 다음과 같이 렌더링 된 이미지를 저장할 수 있습니다

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을 참조하십시오.