fractal

# 5. 動的画像生成 Internet ComputerのBackend Canisterで動的に画像生成してみます。ここで解説するサンプルは、Frontendから渡した画像サイズをもとにBackendで動的に画像データを生成して返すだけのシンプルなものです。生成画像はBackend側のデータを利用しないため、厳密にはBackendを呼び出さずともFrontend内で生成可能なのですが、あえてBackendで動的生成させています。 Backendで動的に画像生成する仕組みを応用することで、Blockchainに刻まれたデータに基づいて動的に画像データを生成するといったこともできるでしょう。 ## 1. テンプレート生成生成した画像を表示するためのFrontendも用意しますので、手っ取り早くテンプレート生成を使うことにします。 ```bash $ dfx new --type=rust fractal $ cd fractal ``` コマンドが成功すると、以下のようなディレクトリ構造でファイルが生成されていると思います。 ``` fractal ├── Cargo.lock ├── Cargo.toml ├── README.md ├── dfx.json ├── node_modules ├── package-lock.json ├── package.json ├── src │ ├── fractal_backend │ │ ├── Cargo.toml │ │ ├── fractal_backend.did │ │ └── src │ │ └── lib.rs │ └── fractal_frontend │ ├── assets │ │ ├── favicon.ico │ │ ├── logo2.svg │ │ ├── main.css │ │ └── sample-asset.txt │ └── src │ ├── index.html │ └── index.js └── webpack.config.js ``` ## 2. プロジェクト資材修正 ### (1) dfx.jsonの編集テンプレート生成されたものがそのまま使えるのでとくに修正は必要ありません。 ### (2) didファイルの編集 Backendを呼び出すためのI/Fを定義します。引数として画像サイズ (x, y) を渡して、pngデータ (バイナリ)を返すことを考えます。サンプルですのでつくりを単純化するため、Backend側からエラーは返さないものとします。 [**src/fractal\_backend/fractal\_backend.did**](https://github.com/toshio/icptest/blob/master/backend/05_fractal/src/fractal_backend/fractal_backend.did) ``` service : { "fractal": (nat32, nat32) -> (blob) query; } ``` ### (3) Backendプログラムの編集 I/Fに合わせてプログラムを用意します。今回はBackendで動的に画像を生成する方法の検証が目的ですので、生成する画像にはこだわりません。使用するimage createのページを見ると『Julia fractals』のコード例がありましたので、今回はこれを使ってみることにしましょう。 - 描画ロジックの詳細については聞かないでください。 [**src/fractal\_backend/src/lib.rs**](https://github.com/toshio/icptest/blob/master/backend/05_fractal/src/fractal_backend/src/lib.rs) ```rust // An example of generating julia fractals. // https://crates.io/crates/image use std::io::Cursor; #[ic_cdk::query] fn fractal(imgx:u32, imgy:u32) -> Vec { ︙ let mut result = vec![]; imgbuf.write_to(&mut Cursor::new(&mut result), image::ImageOutputFormat::Png).unwrap(); result } ``` ### (4) Rust依存モジュールの追加 Julia fractalsでは計算に複素平面を使用するため、num-complex crateを使います。また、Rust上で画像を扱いpngフォーマットへの変換するために、image crateを追加します。 ```bash $ cargo add num-complex $ cargo add --features png --no-default-features image ``` プロジェクトルートにあるCargo.tomlはWorkspaceの設定にすぎませんので、 [**Cargo.toml**](https://github.com/toshio/icptest/blob/master/backend/05_fractal/Cargo.toml) ```toml [workspace] members = [ "src/fractal_backend", ] ``` 実体があるsrc/fractal\_backend/Cargo.tomlに依存ライブラリが追加されます。 [**src/fractal\_backend/Cargo.toml**](https://github.com/toshio/icptest/blob/master/backend/05_fractal/src/fractal_backend/Cargo.toml) ```toml ︙ image = { version = "0.24.7", default-features = false, features = ["png"] } num-complex = "0.4.4" ``` ### (5) Backend呼び出し用のJavaScriptソース生成 FrontendからBackendを呼び出せるようにJavaScriptソースを生成します。 ```bash $ npm run generate ``` ※コマンドの実体は`dfx generate fractal_backend`です。 ### (6) index.htmlの編集あくまでもサンプルですので、画像サイズ (x, y) を入力する``タグ、画像生成する`

``` ### (7) index.jsの編集 buttonがクリックされた場合に、Backendのfractal()関数を呼び出し、取得できたpngデータを``タグに表示する例です。 ``タグにpngデータを直接流し込むことはできないため、convertToDataUrl()関数を用意してDataUrl形式に変換し、src属性に設定する方法で実現しています。 ```javascript import { fractal_backend } from "../../declarations/fractal_backend"; document.getElementById("button").addEventListener("click", async (e) => { e.preventDefault(); const x = parseInt(document.getElementById("x").value); const y = parseInt(document.getElementById("y").value); const png = await fractal_backend.fractal(x, y); const blob = new Blob([png], { type: "image/png" }); const url = await convertToDataUrl(blob); button.removeAttribute("disabled"); document.getElementById("fractal").src = url; return false; }); ``` convertToDataUrl()関数はDfinityの[公式サンプル](https://github.com/dfinity/examples/blob/master/rust/qrcode/src/qrcode_frontend/src/index.js#L59-L69)を流用しています。 ```javascript // Converts the given blob into a data url such that it can be assigned as a // target of a link of as an image source. function convertToDataUrl(blob) { return new Promise((resolve, _) => { const fileReader = new FileReader(); fileReader.readAsDataURL(blob); fileReader.onloadend = function () { resolve(fileReader.result); } }); } ``` ### (8) dfxサービス起動 ```bash $ dfx start --background --clean ``` ### (9) Backend、Frontendのローカル配備 ```bash $ dfx deploy ``` ## 実行例 ![](https://2522453695-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcDtJy07jagC8cHsyOVmZ%2Fuploads%2Fgit-blob-061218e6afe5bed3b60d87c4180c3d3d2cb95703%2Ffractal.png?alt=media) ## 参考 * [QR code generator on the Internet Computer](https://github.com/dfinity/examples/tree/master/rust/qrcode)