画像の Base64 変換。Apps でデコードツールをつくってみる

本記事では画像や文字を他のデータ形式に変換してくれるアクティビティ（Encode & Decode Activities）と UiPath Apps をつかった画像のデコードツールの作り方を紹介します。
![はーと.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/21f2be10-1937-9d51-7d81-bdab1af0768f.png)
を Base64 という形式の文字列に変換すると
```
iVBORw0KGgoAAAANSUhEUgAAACUAAAAjCAIAAACcpVRJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE7SURBVFhH5Zc9EoIwEEa9/2E8ARdInYKCOmUaCtr1g6BmN1lINNEZfbONzsJjl/xxoc/yv755IefITGs4v/7UWDP9M+b97yw53+xoMHRNw9Lo95wAHiibOUyaNfGNVl4sYr/XQuYs04U7MrjPTfKafFilASJsWmXsW8ruUhODrDHylRZXGdwY+UyS2iQMG2IPn5d5rYK3tL/vOu2GjbsPc07mtQo2Sr/l69jPT/uy7w90mg/K+CxYOV+LkW0ska9LS1kzQezrUCIvDnBf2yU7WayB8AHfSCk7GUh94O0qsScrZH2gYPvWgm8IAs23Ub0jWnL6sWrj0Afm4tepn5FiznyB03kizm06ZT6gbiCZQ9EBxT6A3kpZUQ9janyAKesqC1T6wKOxmdXjnHofwAfDwefEIS/53uC3fUQ3aVbgpAsXEskAAAAASUVORK5CYII=
```
こうなります↑↑

不思議ですよねー　後で書きますが、この文字列からちゃんと画像を復元できるんです(◎_◎;)
HTTP通信では、画像データを一度この Base64 形式に変換して送受信するんですね

「Encode & Decode Activities」
パッケージ（UiPathTeam.EncodeActivities.Activities.Desigin）をインストールすると、こちらの4つのアクティビティが現れます↓↓
![e059a3c0-c6ab-4072-b10c-1b829e9368bf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/6776a23e-1148-b33a-f0a3-faad4dcc787b.png)
本日は画像操作の以下のアクティビティを紹介します。
- Decode Image from Base64
- Image to Base64

使い方は至極簡単

## まずは ***画像の Base64 文字列化*** から
![画像のエンコード_デコード2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/913a67b1-7a81-966c-e242-fa031d284ca9.jpeg)
変換対象の画像のファイルパスと出力変数を指定する、たったこれだけ
![画像のエンコード_デコード3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/0693cef5-8c5c-d856-bfc3-b3b78b03523b.jpeg)
上の画像で試すと、出力パネルに長大な呪文が出現↓↓
![画像のエンコード_デコード4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/339a1219-0c80-c362-2563-3e023641e00f.jpeg)
## 次に ***Base64 文字列から画像化***
![画像のエンコード_デコード6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/c9d7a633-93ca-d0e3-d20e-64ed728e95b4.jpeg)
こちらも先の出力文字列と保存先のファイルパスを指定するだけ
![画像のエンコード_デコード5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/e5391a17-b33a-fded-079f-14ed52365f3f.jpeg)
上左図が Base64 文字列から戻した画像　／　上右図は元画像

見た目はもちろん、プロパティのイメージ情報をみるに同じ画像データが復元されています。

Base64 文字列への関心が高まってちょっと追い検証しました↓
![エンコード遊び8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/7c298215-3491-6bf1-30d7-d7c1fcf96d91.jpeg)
![エンコード遊び9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/6cafa5ce-2d29-e9ca-9901-eaccd3cb10fe.jpeg)
![エンコード遊び10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/fb1c26eb-2e6c-a914-5f84-c0ed04ecdfc5.jpeg)
当然といえば当然ですが、サイズや情報量は小さい・少ないほど文字列は短くなります。

こちらの画像（実寸）で変換かけると
![カフェ・ラテ191_255.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/a37feb82-35b5-3594-2026-d05a0470e262.jpeg)
***3万2千409文字***
![エンコード遊び2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/fa0575c4-9b73-4f0f-0455-e099cab3cdd9.jpeg)
この Base64 文字列は以下の様なデコードサイトでも簡単に復元できます。

https://rakko.tools/tools/71/

![エンコード遊び4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/e9fff84d-cbb6-98ef-19ab-9b4dae8d345d.jpeg)
ちなみに、UiPath の Apps でもこんなに簡単に作れます↓↓
![エンコード遊び7-2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/4aa9a53d-9e73-58b8-999a-f130d1cc1098.jpeg)

## UiPath Apps でのデコードツールの作り方（Base64 文字列 → 画像）

1. 「Textarea」と「Label」を配置
1. 「Textarea」のイベントで「Textarea」の入力内容を「Label」に補完するよう設定

![エンコード遊び6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/b4c73b96-fe54-f7a7-2c7f-ed200a43f8c9.jpeg)
補完する値（Value）は以下の様にしてください↓
```
="<img decoding='async' src='data:image/png;base64,"&Textarea&"' alt='base64 sample'>"
```
![エンコード遊び5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/d5266cfe-c186-3291-3422-3853e7a3ca24.jpeg)
備考：上記は「Textarea」の値を入れるため、&Textarea&となってますが、他の変数で指定する際のために「変数」をどこで作成するか補足します。***リソースパネルの一番下です！***
![エンコード遊び5-2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3301444/6649eb6d-cff6-1095-bb94-19c922653fe8.jpeg)

いかがでしたでしょうか？
専用パッケージのインストールや Apps を使えば画像操作もこんなに簡単におこなえます☀
Base64 文字列を分割して、社内レクのクイズ素材にして遊んでも面白そうですよね
（文字列を集めて、正しい順序で並べてデコードすれば答えのメッセージ画像が出現する的な遊び）

UiPath は無料で使えます！興味が湧いた方は是非こちらをクリック↓↓

https://www.uipath.com/ja?utm_source=google&utm_medium=cpc&utm_campaign=[JP]_Tier-1_JAP_Brand_T4_Head&utm_term=uipath-p&utm_content=B_UiPath-Broad-B1&gad=1&gclid=CjwKCAjwjaWoBhAmEiwAXz8DBTXRlXKNt5ZPBN1BsZFxglLP_C1CQ6q1jxAEdEAM5iEdsjVNlqqQBBoC-rwQAvD_BwE&gclsrc=aw.ds