ノードキャンバスを使用して検証コードを描画する

高洛峰
リリース: 2016-11-19 16:13:52
オリジナル
2277 人が閲覧しました

ステップ 1 インストール

node-canvas をインストールする前に、いくつかの依存関係をインストールする必要があります。 Linux と Mac を例として、システムごとに異なるインストールが必要です。

linux: sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel

mac: brew install pkg -config cairo pango libpng jpeg giflib

その他の参考文献node-canvas#installation

依存関係をインストールした後、npm install Canvasを実行します。

ステップ2 描画

キャンバスを取得することで、コンテキストオブジェクトを取得し、フロントエンドと同じようにグラフィックを描画することができます

const Canvas = require('canvas'); const canvas = new Canvas(100, 30), ctx = canvas.getContext('2d');
ログイン後にコピー

実際、私が使用しているAPIは、フロントエンドなので、描画プロセスについてはあまり説明しません。キャンバス上の関連するチュートリアルを参照してください。

以下は a + b = ? を描画するための検証コードです

ctx.font = '24px "Microsoft YaHei"'; // 绘制文本 let drawText = (text, x) => { ctx.save(); // 旋转角度 const angle = Math.random() / 10; // y 坐标 const y = 22; ctx.rotate(angle); ctx.fillText(text, x, y); ctx.restore(); } // 随机画线 let drawLine = () => { const num = Math.floor(Math.random() * 2 + 3); // 随机画几条彩色线条 for (let i = 0; i < num; i++) { const color = '#' + (Math.random() * 0xffffff << 0).toString(16); const y1 = Math.random() * height; const y2 = Math.random() * height; // 画线 ctx.strokeStyle = color; ctx.beginPath(); ctx.lineTo(0, y1); ctx.lineTo(width, y2); ctx.stroke(); } } // 数字的文本随机从小写汉字、大写汉字、数字里选择 const numArr = [ '〇一二三四五六七八九', '0123456789', '零壹贰叁肆伍陆柒捌玖' ]; // 第一个数字 const fir = Math.floor(Math.random() * 10); // 第二个数字 const sec = Math.floor(Math.random() * 10); // 随机选取运算 const operArr = ['加', '减', '乘']; const oper = Math.floor(Math.random() * operArr.length); drawLine(); drawText(numArr[Math.floor(Math.random() * numArr.length)][fir], 10); drawText(operArr[oper], 40); drawText(numArr[Math.floor(Math.random() * numArr.length)][sec], 70); drawText('=', 100); drawText('?', 130); // 验证码值的计算 let captcha; switch(oper) { case 0: captcha = fir + sec; break; case 1: captcha = fir - sec; break; case 2: captcha = fir * sec; break; } // 存入 session req.session.captcha = captcha;
ログイン後にコピー

効果は次のとおりです:

ノードキャンバスを使用して検証コードを描画する

ステップ 3 画像を返します

Canvas.toDataURL() を呼び出して、画像の Base64 形式のデータを返します画像。

res.send({ status: 200, data: canvas.toDataURL() })
ログイン後にコピー

中国語の文字化け

プロジェクトを Linux にデプロイした後、出力イメージ内の中国語の文字がすべて四角いボックスに変更されていることがわかりました。

この記事 https://my.oschina.net/u/129529/blog/266843 を参照しましたが、すべてを実行する代わりに、

yum groupinstall "中国語サポート"、yum groupinstall フォントのこれら 2 つをインストールしました。

Microsoft Yahei を使用した質問 https://cnodejs.org/topic/53f98ad8bbdaa79d518c0836 の 5 階も参照してください。

問題 #461 もあり、フォントの両側に引用符を追加します。

これらの 3 つの手順に従ってプロジェクトを再起動しましたが、問題ありませんでした~


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!