ポケモン画像でアスキーアート風に変換するwebアプリを作った

こんにちは、Yuiです。

引き続き週イチ発信をしていきます。
今週は先週作ったポケモンAA化APIを使ってwebアプリを作ったのでその件について書きます。

先週作ったポケモン画像でアスキーアート風に変換するAPIを利用してwebアプリを作りました！https://t.co/LcZPeFVdyO pic.twitter.com/iof8e1tSW0

— yui ⛅ Yuiko Ito (@yui_active) July 12, 2021

過去の週イチ発信は以下

• 【React + Typescriptで顔認識】tensorflowを使って画像にマスクをかけるアプリを作った
• 【React + Typescript】ボタン一つでコンポーネントのscssをコピーできるサイトを作った
• 【アップデート】ui-componentsに18個のコンポーネントを追加した
• 【Nuxt.js × Tailwind CSS】ボタン一つで有名絵画風の画像にできるサービスをリリースした！
• 【GASでLINE Bot作成】現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Botを作った
• 【動的OGP】Next.js + TypeScript + Vercelデプロイで動的OGPを実現する
• 【LambdaでOpenCVを利用】AWSとOpenCVを利用してポケモン画像でアスキーアート風に変換するAPIを作った

構成

構成はいつもどおりのNuxt.js + tailwind CSSです。
一度テンプレを作ったらずっと使ってしまいますね。

デプロイはvercelで行ってます。

動的OGP部分はこちらの記事に書いてあるとおりで、アスキーアート化するAPI部分に関しては先週こちらに書いてます。

使い方

使い方は上記にアクセスして、

• 画像を選択
• 変換ボタンをクリック
• 後は待つだけ

のお手軽構成です。
ログインも不要なので、ぜひ遊んで見て下さい！

一応多言語化していて、ユーザーのブラウザ言語が日本語のときは日本語で英語のときは英語で表示できるようにしています。

デザインは塗り絵ツクールや絵画ツクールの使いまわしですが、微妙にこだわったこととして、ローディングアニメーションをモンスターボールにしてます。笑

このモンスターボールに関しては、Temani Afifさんのこの記事から、自由に使って良いと書かれてあるのでありがたく拝借しました。

画像の圧縮処理

今回APIの処理部分が非常に重くなってしまう関係で、フロント側で画像を圧縮して送ってます。
絵画ツクールでも同じ処理を加えています。
やはり画像処理系は送る前にできる限り軽量化して送らないと時間がかかってしまいますね。

処理内容としては以下です。

/**
 * Canvasの描画して画像をリサイズする
 * @param {object} image - Imageオブジェクト
 * @param {number} limitWidth - 最大横幅
 * @param {number} limitHeight - 最大縦幅
 * @returns {string} - base64
 */
export default async function resizeImage(image, limitWidth, limitHeight) {
  const aspect = image.width / image.height;
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  let canvasWidth;
  let canvasHeight;
  if (image.width > limitWidth || image.height > limitHeight) {
    // 規定サイズよりも画像が大きい場合
    if (aspect > 1) {
      // 横長画像の場合
      canvasWidth = limitWidth;
      canvasHeight = limitHeight * (image.height / image.width);
    } else {
      // 縦長画像の場合
      canvasWidth = limitWidth * (image.width / image.height);
      canvasHeight = limitHeight;
    }
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
  } else {
    // 規定サイズ内の場合
    canvas.width = image.width;
    canvas.height = image.height;
    canvasWidth = image.width;
    canvasHeight = image.height;
  }
  ctx.drawImage(
    image,
    0,
    0,
    image.width,
    image.height,
    0,
    0,
    canvasWidth,
    canvasHeight
  );
  return canvas.toDataURL("image/jpeg", 0.85);
}

あとがき

今回はネタアプリということで、先週遊びで作ったAPIをwebアプリ化してみました。
うまく変換できなかったり、変換できても使い所がわからない画像にはなるとは思いますが、楽しんでもらえると嬉しいです！