CanvasでCAPTCHA 画像認証

HTML5のCanvasでブラウザ上にCAPTCHA 画像認証を生成

(なんとなく思いつきで)画像認証をHTML5 Canvasで。

jQuery

$(function () { var arg = {}; $(document).ready(function () { arg['id'] = 'canvas'; draw(arg); }); function draw(arg) { var ctx = $('#' + arg['id'])[0].getContext('2d'); // 動的に生成 ctx.font = 'Italic 32px sans-serif'; ctx.fillStyle = '#666'; ctx.scale(1, 1.2); ctx.fillText('D', 0, 60); (略) ctx.font = 'Italic 28px sans-serif'; ctx.fillStyle = '#000'; ctx.scale(1, 0.9); ctx.scale(1, 1.1); ctx.fillText('j', 536, 113); } });

HTML

<canvas id="canvas" width="450" height="150"></canvas>

小文字oと大文字Oと数字0など、画像認証において紛らわしいものはどれか1つにするか、使わない。
(サンプルでは小文字oのみ、その他紛らわしい文字はアルファベットの小文字のみに限定)

サンプル

連続で描画したときのX座標の動きが完全に把握しきれていないので、動的に生成する部分のソースは非公開で。

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。