Xamarin SyncFusion，裁剪图像未正确传递？

Posted 2023-04-13

【中文标题】Xamarin SyncFusion，裁剪图像未正确传递？

【英文标题】：Xamarin SyncFusion, Cropped Image not passed properly?

【发布时间】：2021-09-25 13:46:23

【问题描述】：

我的目标是将在我的 CropPage.xaml 中编辑的 cropped 图像（其中包含用于执行此操作的 SfImageEditor）传递给另一个类。

这里是 CropPage.xaml 文件的代码：

<SyncFusion:SfImageEditor x:Name="imgEditor"
                         ImageSaved="imgEditor_ImageSaved">
</SyncFusion:SfImageEditor>

现在我已经编辑了 SfImageEditor 页面顶部的默认工具栏，使“继续”成为可点击的，所有这些都在 CropPage.xaml.cs 中。当然还有更多代码，但这是我认为重要的主要部分：

// Assign function when a selection occurs.
imgEditor.ToolbarSettings.ToolbarItemSelected += ToolbarSettings_ToolbarItemSelected;

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)

    // When the user is ready to move on, they press continue to move to the next page. Check specifically for that.
    if(e.ToolbarItem.Text == "Continue")
    
        // Get the image and transfer it to the next page here. (Is it really just the source?)
        Navigation.PushAsync(new ProcessPage(imgEditor.Source));
    

当然，ProcessPage 只是另一个类，它的构造函数接收 ImageSource。重要的代码是：

    // CropPage will pass on the image source when the user is done cropping, and image will be used for the algorithm.
    ImageSource m_savedImgSrc;

    public ProcessPage(ImageSource imgSource)
    
        // Get rid of the navigation bar.
        NavigationPage.SetHasNavigationBar(this, false);

        InitializeComponent();

        // Place image on screen.
        imgSpace.Source = imgSource;
    

上面的“imgSpace”只是一个小区域，用于显示将被裁剪的图像，xaml 文件中的代码如下所示：

 <Image x:Name="imgSpace"
       AbsoluteLayout.LayoutBounds="0.5, 0.3, 0.9, 0.65"
       AbsoluteLayout.LayoutFlags="All">
 </Image>

所以计划很简单，我在 CropPage 中使用 SfImageEditor 裁剪图像，然后将其传递给 ProcessPage 进行显示。但无论我如何裁剪它，它都会进入 ProcessPage 并且有原始图像。

我想我确实假设当我在 CropPage 中裁剪图像时，显示的新图像在源中，因此如您所见传递源将解决我的问题。但不幸的是，事实并非如此。

我必须缺少一些东西来解释为什么我没有得到我想要的裁剪图像。非常感谢任何帮助！

【问题讨论】：

你先存钱吗？我会保存然后传递路径，而不是原始的 ImageSource

如果您的意思是将图像保存到手机本身，我根本不会这样做。我认为没有必要在用户手机上占用额外的内存空间，但由于图像清晰地显示在屏幕上，那就足够了。

我认为你需要保存它。完成后可以删除文件。

【参考方案1】：

检查了您的要求和共享代码，您无法从 ImageEditor.Source 属性中获取编辑后的图像，因为它仅包含在图像编辑器中添加的原始 ImageSource。

但是，您可以按照以下代码 sn-p 从图像编辑器的 ImageSaving 事件中获取编辑后的图像流

<imageeditor:SfImageEditor Source="Binding Image"  x:Name="editor" ImageSaving="imgEditor_ImageSaving"/>

编辑完成后，单击Continue 工具栏按钮并传递编辑后的图像源。

private void ToolbarSettings_ToolbarItemSelected(object sender, ToolbarItemSelectedEventArgs e)
    
        if (e.ToolbarItem.Text == "Continue")
        
         // Call editor save method.
            editor.Save();
        
    


    private void imgEditor_ImageSaving(object sender, ImageSavingEventArgs args)
    
       // Below line will stop the image saving to your machine. If you like to save the image in your machine, you can remove the below line.
        args.Cancel = true;

       //args.Stream contain edited image stream
        var stream = args.Stream;

       //Convert the edited stream to ImageSource
        var source = ImageSource.FromStream(() => stream);
       // Pass edited image source to the next page
        Navigation.PushAsync(new ProcessPage(source));