開発されたWebアプリをpokに変換するには

ヘイガイズ👋👋👋
私は、pokのようなモンのアスキーアートスタイルにイメージを変換するWebアプリを開発しました.

ウェブサイト:https://poke.art-creator.net/
ギタブ:https://github.com/yuikoito/poke-art-creator
このように!

この記事は毎週少なくとも1つの記事を書くことを試みる8週目です.

用途

https://poke.art-creator.net/を訪問してください、そして、あなたがpokのものを変えることを望む何でもイメージをアップロードしてください.
スリーステップ.

イメージ

を選択します

ボタンをクリックします
それから、

、WAIT

あなたもログインする必要はありませんので、見て、自由にお楽しみください!

ローディングアニメーション

モンスターボールをローディングアニメーションとして使った.
おかげで、私は良いアニメーションを得た.

画像圧縮

今回はAPI処理部が非常に重いため、前面に圧縮されて送られる.
ArtCreatorにおいても同様である.
画像処理システムは、それを送る前に、できるだけ軽くしなければなりません、さもなければ、それは多くの時間をとります.
以下、その処理について説明する.

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

それだ！

読書ありがとう.
これは冗談アプリのいくつかの種類ですが、私は非常に満足している場合はそれをお楽しみください!
🍎🍎🍎🍎🍎🍎
必要ならメッセージを送ってください.
[email protected]
🍎🍎🍎🍎🍎🍎