c# / Xamarin Camera Plugin - PullRequest
       1

c# / Xamarin Camera Plugin

0 голосов
/ 28 февраля 2020

Я учусь C# и пытаюсь разработать мобильное приложение, где пользователь может продавать и покупать вещи. Пользователь может добавить объявление, и отчасти это означает, что он может делать снимки напрямую или из собственной галереи.

У меня есть медиа-плагин, который отлично работает, но мне не удается временно сохранить и отобразить изображения на странице добавления. Моя цель состоит в том, чтобы после того, как пользователь сделает снимок, который он отображает как MainImage, после того, как он снова нажмет кнопку «Сделать снимок», предыдущий снимок должен переместиться в местоположение MainImage2 и т. Д. Главное изображение - это самый большой дисплей, поэтому, как только он сделает новый снимок у него будет возможность решить, хочет ли он рекламировать это или сделал другую фотографию.

В общей сложности он должен иметь возможность сделать 5 фотографий и отобразить их в своем объявлении.

Это мой быстрый xaml:

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:controls="clr-namespace:Baltazar.Controls"
             xmlns:templates="clr-namespace:Baltazar.Views.Templates"
             xmlns:resources="clr-namespace:Baltazar.Resources"
             xmlns:helpers="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
              xmlns:local="clr-namespace:Baltazar.Views"
              x:Class="Baltazar.Views.AddingPage">
    <ContentPage BackgroundColor="{ StaticResource BackgroundColor }">

        <ContentPage.Content>
            <StackLayout Spacing="-1">
                <Grid Grid.Row="0"  VerticalOptions="Start"  RowSpacing="0">
                    <!--ToolBar-->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <templates:HeaderItem Grid.Row="0"></templates:HeaderItem>
                    <AbsoluteLayout Grid.Row="0">
                        <!--Notifications-->
                        <Image Source ="{DynamicResource Notificatons}"
                           AbsoluteLayout.LayoutBounds="0.95,0.40,30,30" 
                           AbsoluteLayout.LayoutFlags="XProportional,YProportional" 
                           BackgroundColor= "Transparent">
                        </Image>
                    </AbsoluteLayout>
                </Grid>
                <Grid Grid.Row="1" RowSpacing="5" Padding="20,0,20,10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="200"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>

                    </Grid.RowDefinitions>
                    <ProgressBar Grid.Row="0" IsVisible="True" BackgroundColor="Black" VerticalOptions="Start" HorizontalOptions="Center"/>
                    <Frame Padding="20,15,20,5" Grid.Row="1"  HasShadow="True" HeightRequest="140" WidthRequest="100">
                        <Image x:Name="MainImage" Grid.Row="1"/>

                    </Frame>

                    <Grid Grid.Row="2" Padding="0,10,0,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>

                        </Grid.ColumnDefinitions>
                        <Frame HeightRequest="40" WidthRequest="43" Grid.Column="0">
                            <Image x:Name="MainImage1" Grid.Column="0"/>
                        </Frame>
                        <Frame HeightRequest="40" WidthRequest="43" Grid.Column="1">
                            <Image x:Name="retSource"  Grid.Column="1"/>
                        </Frame>
                        <Frame HeightRequest="40" WidthRequest="43" Grid.Column="2">
                            <Image x:Name="MainImage3" Grid.Column="2"/>
                        </Frame>
                        <Frame HeightRequest="40" WidthRequest="43" Grid.Column="3">
                            <Image x:Name="MainImage4" Grid.Column="3"/>
                        </Frame>
                        <Frame HeightRequest="40" WidthRequest="43"  Grid.Column="4">
                            <Image x:Name="MainImage5" Grid.Column="4"/>
                        </Frame>
                    </Grid>
                    <Grid Grid.Row="3" Padding="20,20,20,10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height ="Auto"/>
                            <RowDefinition Height ="Auto"/>

                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Button Grid.Row="0" Grid.Column="0" Style ="{StaticResource SecondaryButton}" Text="{x:Static resources:LabelCZ.ButtonTakePicture}" Clicked="TakePicture_Clicked"/>
                        <Button Grid.Row="0" Grid.Column="1" Style ="{StaticResource SecondaryButton}"  Text="{x:Static resources:LabelCZ.ButtonUploadPhoto}" Clicked="UploadPhoto_Clicked" />
                        <Button Grid.Row="1" Grid.Column="0" Style ="{StaticResource SecondaryButton}" Text="{x:Static resources:LabelCZ.ButtonTakeVideo}" Clicked="TakeVideo_Clicked" />
                        <Button Grid.Row="1" Grid.Column="1" Style ="{StaticResource SecondaryButton}" Text="{x:Static resources:LabelCZ.ButtonUploadVideo}" Clicked="UploadVideo_Clicked" />
                    </Grid>

                </Grid>
            </StackLayout>


        </ContentPage.Content>

    </ContentPage>

</CarouselPage>

, и вот код позади ..

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using SQLite;
using Baltazar.Helpers;
using Baltazar.Model;
using Plugin.Media;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Plugin.Media.Abstractions;
using System.IO;
using System.Globalization;

namespace Baltazar.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class AddingPage : CarouselPage
    {
        AdLogEntry adLogEntry = new AdLogEntry();
        CameraService cameraService = new CameraService();
        public byte[] imageAsBytes;
        public string pathLabel;

        public AddingPage()
        {
            InitializeComponent();
        }

        private async  void TakePicture_Clicked(object sender, EventArgs e)
        {
            await CrossMedia.Current.Initialize();

            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("Nemame přístup", "Nelze nalezt kameru", "OK");
                return;
            }

            var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions

            {
                PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
                Directory = "Sample",
                SaveToAlbum = true,
                Name = "test.jpg"
            });

            if (file == null)
                return;

            await DisplayAlert("File Location", file.Path, "OK");

            pathLabel= file.Path;

            MainImage.Source = ImageSource.FromStream(() => // display
            {
                var stream = file.GetStream();
                return stream;
            });

            using (var memoryStream = new MemoryStream()) // image in bztes
            {
                file.GetStream().CopyTo(memoryStream);
                file.Dispose();
                imageAsBytes = memoryStream.ToArray();

            }


        }
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            ImageSource retSource = null;

            if (value != null)
            {
                byte[] imageAsBytes = (byte[])value;
                retSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));
            }

            return retSource;
        }
        public void MovePicture()
        {
            if (retSource != null)
            {
                MainImage1.Source = retSource;


            }
           else 
        }

Мой вопрос, если вы можете указать мне в праве Направление, как это сделать.

1 Ответ

0 голосов
/ 28 февраля 2020

Во-первых, у вас может быть модель:

public class User
{
   public int Id {get; set;}
   public string Name{get; set;}
   public List<Picture> Pictures{get; set;}
}

public class Picture
{
    public string Id {get; set;}
    public string Url{get; set;}
    public byte[] Image{get; set;}
}

Теперь вы можете иметь список фотографий с их byte[], при этом вы можете временно их отображать. Сделав снимок, добавьте изображение в список изображений и обновите свой пользовательский интерфейс (это можно сделать автоматически с помощью шаблона MVVM).

Для обеспечения устойчивости вы можете использовать sqlite для локального хранилища и azure для облачного хранилища. , Есть множество библиотек, чтобы легко интегрировать это.

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...