なんとa要素にdownload属性を追加するだけで、ページ(ファイル)を表示するのではなく、Webブラウザにファイルを保存するかダイアログを表示させダウンロードを促すことが可能です。 <a href="foo.txt" download>foo</a> download属性にファイル名を指定すれば、デフォルトのファイル名として…

Amazon Rekognitionを使うと画像や動画をAIで解析し、そこにどういった物体が存在しているか「ラベル」を付けてくれます。例えばジャイアントパンダが写っていれば「Giant Panda」というテキストと、画像内のどこに存在しているか座標情報が送られて来ます。…

Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーター…

Canvasを利用して簡単なパラパラアニメを作成してみます。 原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたす…

Canavsに三角形を描画します。 HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。

Canavsに線を描画します。 ここでは純粋な直線と、曲線として円弧、ベジュ曲線を取り上げます。

Canavsに円を描画します。ここでは正円と、一部が欠けた円を取り上げます。

Canavsに四角形を描画します。また四角形で囲んだ領域をまるっとキレイに削除することも可能です。

Canvasにテキストを描画します。フォントや色なども自由に指定できます。

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。 今回は「ゆるドラシル」のアセットを利用させていただきました。 yur…

canvasタグに現在描画されている内容を画像としてクライアントにダウンロードしてみます。 Webブラウザなどのクライアントだけで完結するためサーバの負荷などを気にする必要がありません。 今回はひたすらカウントアップするcanvasを、ボタンを押したタイミ…

今回は複数のcanvasタグを合成し、最終的に1つのcanvasに画像として結合する処理を取り上げたいと思います。 ↑こんな感じで画像を表示したcanvasと、キャプションを表示したcanvasを合成します。

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。 以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。 PCやスマホに付いているカメラの映像を0.3秒毎にチェックし…