使用 MVVM 将笔画保存为图像答案

【问题标题】：Saving strokes as an image using MVVM使用 MVVM 将笔画保存为图像
【发布时间】：2018-03-12 09:27:51
【问题描述】：

我的代码中有一个函数可以满足我的需求。我喜欢这个的一点是，无论用户如何将他的绘图扩展到 InkCanvas 边界之外，图像都会在保存时调整大小。

private void exportCanvasToBitmap(object sender, EventArgs e) {

RenderTargetBitmap rtb = new 
RenderTargetBitmap((int)signatureCanvas.ActualWidth, 
(int)signatureCanvas.ActualHeight, 96, 96, PixelFormats.Default);
        rtb.Render(signatureCanvas);

        BmpBitmapEncoder encoder = new BmpBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(rtb));
        FileStream fs = File.Open(@".\images\"+ signatureFileName + ".jpg", FileMode.Create);
        encoder.Save(fs);
        fs.Close();
        (sourceWindow as MainWindow).updateSignatureImage(signatureType, signatureFileName);
    }

我想把它移到 ViewModel 上，但我不知道如何让它和我之前的一样。我不想在 ViewModel 中使用rtb.Render(inkCanvas)。经过一番搜索，我将一个 StrokeCollection 绑定到我的视图并使用了这个函数。

  public void convertStrokestoImage() {

        StrokeCollection sc = strokes;

        byte[] inkData = null;

        using (MemoryStream inkMemStream = new MemoryStream())

        {

            sc.Save(inkMemStream);

            inkData = inkMemStream.ToArray();

        }

        byte[] gifData = null;


        using (Microsoft.Ink.Ink ink2 = new Microsoft.Ink.Ink())
          {

            ink2.Load(inkData);

            gifData = ink2.Save(Microsoft.Ink.PersistenceFormat.Gif); 

        }

        File.WriteAllBytes("./Src/strokes.png", gifData);

    }

这样做的问题是，如果用户画出 InkCanvas 的边界，图像会缩放“这是我不想要的”。我不太确定该怎么做，因为我在网上找到的这两个功能都是其他问题的解决方案。

我最初的想法是，我必须对之前的 RenderTargetBitmap 做一些类似的事情，该 RenderTargetBitmap 具有我的 InkCanvas 的实际宽度和高度。问题是我不知道如何在不使用 InkCanvas 对象本身的情况下获得它。

有什么建议吗？

【问题讨论】：

there 中的任何内容对您有帮助吗？
没有。 MVVM != 没有代码隐藏。将 UI 代码保存在代码隐藏中，并通过 ICommand 绑定将结果传递给视图模型。将 UI 逻辑塞进视图模型是新开发者对该模式的最大误解。将您的业务逻辑置于您的 UI 之外，并将您的 UI 置于您的业务逻辑之外。
@Kilazur 你好，我正在寻找调整图像大小而不是 Inkcanvas 本身。
@Will 你好，我明白你的意思，但是为了学习，我试图在我当前的代码中强制使用 MVVM。
那么，您需要学习的第一件事就是不要将 UI 代码塞进您的视图模型中 :)

标签： c# wpf mvvm bitmap png

【解决方案1】：

我这样解决了这个问题。

首先我将 byte[] 转换为 Image，然后使用辅助函数调整图像大小。

 public void convertStrokestoImage()
    {

        StrokeCollection sc = strokes;

        byte[] inkData = null;

        using (MemoryStream inkMemStream = new MemoryStream())

        {

            sc.Save(inkMemStream);

            inkData = inkMemStream.ToArray();

        }

        byte[] gifData = null;


        using (Microsoft.Ink.Ink ink2 = new Microsoft.Ink.Ink())
        {

            ink2.Load(inkData);

            gifData = ink2.Save(Microsoft.Ink.PersistenceFormat.Gif);

        }

        MemoryStream ms = new MemoryStream(gifData);
        Image image = Image.FromStream(ms);
        image = resizeImage(image, 100, 150);
        image.Save("./Src/strokes.png");

    }

您可以在以下问题中找到很多调整图像大小的函数。 Resize an Image C#

我不喜欢的是图像文件变大了！例如，原来的 5kb 变成了 30kb。

【讨论】：