Post został zainspirowany komentarzem zawierającym pytanie opublikowanym jakiś czas temu pod postem nt. ręcznego podpisu. Kevan zapytał, czy jest to możliwe aby zrobić zdjęcia, następnie nanieść na nim notatki i na koniec połączyć te dwa obrazy w jeden.

Pomyślałem, że to powinno być dość łatwe i szczerze mówiąc, tak nawet było, jednak poległem na ostatnim kroku – scalania obrazów. Muszę to przyznać – nie udało mi się zrobić tego samodzielnie. Zdecydowałem się wobec tego na użycie darmowego API o nazwie „Convert API”. Chciałem zrobić to za pomocą funkcji Azure, ale nie byłem w stanie dać sobie samodzielnie rady, a pomoc znikąd nie nadchodziła 🙂

Rozwiązanie

Jest zbudowane z następujących elementów:

1. PowerApps – użyty jest do robienia zdjęć, a następnie do nanoszenia na nie notatek;
2. Blob Storage – użyty jest do przechowywania obrazu z kamery oraz drugiego – z notatkami, a także za przechowywanie ostatecznego, połączonego obrazu;
3. Flow – otrzymuje wszystkie informacje o transformacjach wykonanych na obrazach i szkicach oraz tworzy HTML łączący dwa obrazy w jednym kontenerze;
4. Convert API – użyty jest do doskonałej konwersji HTML do pliku PNG 🙂

Notatki w PowerApps

Idea jest prosta. Użytkownik najpierw robi zdjęcie:

Następnie manipuluje nim (obraca, skaluje, ustala pozycję) korzystając z dostępnych opcji:

I na koniec może dodać notatki:

Ostatecznie klika w przycisk służący do rozpoczęcia procesu łączenia obrazu z notatkami w jeden i w efekcie otrzymuje link do wygenerowanego obrazu:

Wygenerowany plik:

Łączenie obrazów w PowerApps (i Flow 😉

Flow gra pierwsze skrzypce w tym rozwiązaniu. Najpierw otrzymuje wszystkie informacje o transformacji wykonane na obrazie:

Dane są przekazywane z PowerApps za pomocą parametrów funkcji:

Set(
    FileURL,
    Mergedrawingwithphoto.Run(
        "/files/takenNotes.png",
        "/files/takenPhoto.png",
        TakenPhoto.Width,
        TakenPhoto.Height,
        Notes.Width,
        Notes.Height,
        Scale_slider.Value,
        Value(Rotation),
        TakenPhoto.X,
        TakenPhoto.Y
    )
);

Następnie Flow pobiera zdjęcia i notatki z Blob Storage:

Następnie Flow sprawdza, czy obraz został obrócony do pozycji pionowej, czy jest w poziomie. Na tej podstawie generuje inny HTML:

Następnie wysyła kod HTML do usługi Convert API, aby otrzymać kod JSON z danymi pliku PNG:

Wreszcie, parsuje JSON, który otrzymuje z Convert API i przesyła zawartość pliku PNG do Blob Storage oraz zwraca URL wgranego pliku z powrotem do PowerApps:

body('Parse_Conversion_Body')?['Files'][0]['FileName']
body('Parse_Conversion_Body')?['Files'][0]['FileData']

Działające rozwiązanie

Zobacz, jak to działa:

Rozwiązanie działa także bardzo dobrze gdy jest uruchomione w wersji mobile:

Jeśli chcesz pobrać rozwiązanie znajdziesz je opublikowane w galerii rozwiązań Community PowerApps tutaj:
https://powerusers.microsoft.com/t5/Community-Apps-Gallery/App-for-taking-photos-and-adding-notes/m-p/289368#M186