Developed a web app to convert images to Pokémon ASCII art style
Tags: nuxt, webdev, tailwindcss
Published: 2021-07-12 14:05:56

Hey guys 👋👋👋

I have developed a web app, that converts images to Pokémon ASCII art style.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc0qhmr31a0x2idhpgxs.png) 

website: https://poke.art-creator.net/
github: https://github.com/yuikoito/poke-art-creator

Like this!

![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/677c7bea-2923-2a9d-a9b3-1e5dce6029c5.jpeg)

※ This article is the eighth week of trying to write at least one article every week.

- [Face detection with Tensorflow【React + TypeScript】](https://dev.to/yuiko/face-detection-by-using-tensorflow-react-typescript-3dn5)
- [UI Components website Released!](https://dev.to/yuiko/ui-components-website-released-2g8e)
- [I made 18 UI components for all developers](https://dev.to/yuikoito/i-made-18-ui-components-for-all-developers-17l6)
- [Image Transformation: Convert pictures to add styles from famous paintings](https://dev.to/yuikoito/image-transformation-convert-pictures-to-add-styles-from-famous-paintings-24ml)
- [Developed an app to transcribe and translate from images](https://dev.to/yuikoito/developed-an-app-to-transcribe-and-translate-from-images-32gp)
- [Generate Open Graph images with Next.js and TypeScript on Vercel](https://dev.to/yuikoito/generate-open-graph-images-with-next-js-and-typescript-on-vercel-110j)
- [OpenCV in Lambda: Created an API to convert images to Pokémon ASCII art style using AWS and OpenCV](https://dev.to/yuikoito/opencv-in-lambda-created-an-api-to-convert-images-to-pokemon-ascii-art-style-using-aws-and-opencv-287l)

## Usage

Visit https://poke.art-creator.net/, then upload an image whatever you want to convert Pokémon ASCII art style.

Just three step.

- Select an image
- Click the Convert button
- Then, wait

You don't even need to log in, so have a look and enjoy freely!

## Loading animation

[![Image from Gyazo](https://i.gyazo.com/04c8921ac368199485969f97e26aea2c.gif)](https://gyazo.com/04c8921ac368199485969f97e26aea2c)

I used the monster ball as a loading animation.

Thanks to [the article of Mr. Temani Afif](https://dev.to/afif/another-100-css-loaders-for-your-next-project-352l), I got a good animation.

## Image compression

This time, due to the fact that the API processing part is very heavy, the images are compressed on the front side and sent.
The same process is applied in [ArtCreator](https://art-creator.net/).
The image processing system needs to be as light as possible before sending it, otherwise it will take a lot of time.

The following is a description of the process.

```react
/**
 * CDraw a Canvas and resize the image.
 * @param {object} image - Image Object
 * @param {number} limitWidth - Max width
 * @param {number} limitHeight - Max height
 * @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 the image is larger than the specified size
    if (aspect > 1) {
      // For horizontal images
      canvasWidth = limitWidth;
      canvasHeight = limitHeight * (image.height / image.width);
    } else {
      // For portrait images
      canvasWidth = limitWidth * (image.width / image.height);
      canvasHeight = limitHeight;
    }
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
  } else {
    // Within the specified size
    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);
}
```

## That's it!

Thanks for reading.
This is some kind of a joking app, but I am very happy if you enjoy it!

🍎🍎🍎🍎🍎🍎

Please send me a message if you need.

yuiko.dev@gmail.com
https://twitter.com/yui_active
🍎🍎🍎🍎🍎🍎