Developed a web app to convert images to Pokémon ASCII art style

Hey guys ???

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

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

Like this!

※ This article is the eighth week of trying to wri…

Hey guys ???

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

image

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

Like this!

1.jpg

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



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

I used the monster ball as a loading animation.

Thanks to the article of Mr. Temani Afif, 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.
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.

/**
 * 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);
}



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
??????


Print Share Comment Cite Upload Translate
APA
Yuiko Ito | Sciencx (2024-03-29T09:13:31+00:00) » Developed a web app to convert images to Pokémon ASCII art style. Retrieved from https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/.
MLA
" » Developed a web app to convert images to Pokémon ASCII art style." Yuiko Ito | Sciencx - Monday July 12, 2021, https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/
HARVARD
Yuiko Ito | Sciencx Monday July 12, 2021 » Developed a web app to convert images to Pokémon ASCII art style., viewed 2024-03-29T09:13:31+00:00,<https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/>
VANCOUVER
Yuiko Ito | Sciencx - » Developed a web app to convert images to Pokémon ASCII art style. [Internet]. [Accessed 2024-03-29T09:13:31+00:00]. Available from: https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/
CHICAGO
" » Developed a web app to convert images to Pokémon ASCII art style." Yuiko Ito | Sciencx - Accessed 2024-03-29T09:13:31+00:00. https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/
IEEE
" » Developed a web app to convert images to Pokémon ASCII art style." Yuiko Ito | Sciencx [Online]. Available: https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/. [Accessed: 2024-03-29T09:13:31+00:00]
rf:citation
» Developed a web app to convert images to Pokémon ASCII art style | Yuiko Ito | Sciencx | https://www.scien.cx/2021/07/12/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style/ | 2024-03-29T09:13:31+00:00
https://github.com/addpipe/simple-recorderjs-demo