実装サンプル
アイコンを設定する
投稿ユーザーのアイコンをセットします．
- 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!"
画像をエクスポート
Canvasの機能を用いて，画像をエクスポートすることができます．
- HTML
- Canvas
caution
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>
<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>
アイコンに外部URLを設定した状態で画像をエクスポートする
アイコンを外部のURLに設定した状態でエクスポートを行うと，SecurityError: The operation is insecureとしてブロックされることがあります．これはCORSによる保護のためです．詳細はこちらを確認してください．
対策として，次のような対処が考えられます．
- 自分が操作するサーバーであれば，サーバーサイドにもCORSヘッダを設定する
- 外部のリソースであれば，自分が操作するサーバーからホストするよう試用を変更する
