Samples

Set Icon

Set icon of user.

HTML
HTML(Canvas)
Node.js
CLI

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spacha Sample</title>
</head>

<body>
    <div id="spc-div"></div>
    <img id="icon" src="https://github.com/bonychops.png" style="display: none;">
    <script src="js/spacha.min.js"></script>
    <script>
        var spc = document.getElementById("spc-div");
        var icon = document.getElementById("icon");
        icon.onload = function(){
            new Spacha(spc, {
                message: "Hello, Spacha!",
                price: 2000,
                user: {
                    name: "Bony_Chops",
                    img: icon
                }
            });
        }
    </script>
</body>

</html>

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spacha Sample</title>
</head>

<body>
    <canvas width="400" id="canvas"></canvas>
    <img id="icon" src="https://github.com/bonychops.png" style="display: none;">
    <script src="js/spacha.min.js"></script>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var icon = document.getElementById("icon");
        icon.onload = function () {
            new SpachaImage(ctx, {
                message: "Hello, Spacha!",
                price: 2000,
                user: {
                    name: "Bony_Chops",
                    img: icon
                }
            });
        }
    </script>
</body>

</html>

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: 2000,
    });

    saveImg(canvas);
})();

const saveImg = (canvas) => {
    const b64 = canvas.toDataURL().split(",")[1];
    const buf = Buffer.from(b64, 'base64');
    fs.writeFileSync("spc.png", buf);
}

spacha \
    --price 2000 \
    --user.name "Bony_Chops" \
    --user.img "https://github.com/bonychops.png" \
    --message "Hello, Spacha!"

Export as image

EXport as image with feature of canvas.

HTML
Canvas

caution

HTML version is not incompatible

index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spacha Sample</title>
</head>

<body>
    <canvas width="400" id="canvas"></canvas>
    <script src="js/spacha.min.js"></script>
    <button onclick="download();">Download</button>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        new SpachaImage(ctx, {
            message: "Hello, Spacha!",
            price: 2000,
            user: {
                name: "Bony_Chops"
            }
        });

        function download() {
            var link = document.createElement("a");
            link.href = canvas.toDataURL("image/png");
            link.download = "spc.png";
            link.click();
        }
    </script>
</body>

</html>

Set as icon which is from external URL

When you use image as icon which is from external URL, it may causes SecurityError: The operation is insecure and blocks you to generate image. This is due to protection of CORS. See here for details. If you want to use it:

When it's from the server you control but differernt origin, set the proper CORS header.
When it's from the server you DON'T control, make it hosted from the server you owned.

Example banner

Samples

Set Icon​

Export as image​

Set Icon

Export as image