Node.jsではじめる

サーバーサイドでもSpachaを呼び出すことができます．

caution

Node.jsから呼び出す場合，SpachaImage(Canvas)のみ対応しています．HTML版のSpachaを用いる場合はHTML，またはReactから呼び出してください．

クイックスタート

1. Node.js，npmが動作する環境を用意します．

   Windows

   nodejs.orgからインストーラをダウンロードします．

   Mac

   次の語句で検索します．

   mac nodejs インストール

   Linux

   次の語句で検索します．

   [distro名] nodejs インストール
   note

   npmなしで動作するスタンドアロン版も検討中です！

2. sample-spc-nodeディレクトリを用意します．

   mkdir -p sample-spc-node
   cd sample-spc-node

3. package.jsonを準備します

   npm init --yes

4. Spachaと必要なパッケージをインストールします．

   npm i spacha canvas

5. index.jsを作成します

   index.js

   const Canvas = require("canvas");
   const Image = Canvas.Image;
   const { SpachaImage } = require("spacha");
   const fs = require("fs");
   
   (async () => {
       const canvas = new Canvas.Canvas(600, 300);
       const ctx = canvas.getContext("2d");
       const iconImg = new Image;
       iconImg.src = "https://github.com/bonychops.png";
       await new Promise((resolve) => { iconImg.onload = resolve });
       new SpachaImage(ctx, {
           user: {
               name: "Bony_Chops",
               img: iconImg
           },
           price: -31117,
           theme: "red"
       });
   
       saveImg(canvas);
   })();
   
   const saveImg = (canvas) => {
       const b64 = canvas.toDataURL().split(",")[1];
       const buf = Buffer.from(b64, 'base64');
       fs.writeFileSync("spc.png", buf);
   }

6. 実行すると，spc.pngが作成されます．

   node index

   

   金額はBony_Chopsの2022/09/17現在の残高です

   Sponsorはこちらから

   • GitHub Sponsor
   • Amazon 欲しい物リスト

実装サンプル

実装サンプルはこちら