HTML

スポンサーリンク
HTML

MonacoEditor + Vue を使ってエディタを実装

概要 Vue + MonacoEditorでJSのデバッガを作ってみました。 標準入出力(?)をサポートしています。とりあえず意味がわからないと思うのでデモをみてください。 紹介 デモ GitHub セットアップ Vue Vueプ...
HTML

async awaitで画像を読み込み canvasに描画 JavaScript

概要 async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。 onloadメソッド縛りで実装すると非同期地獄になりますが、async await を使うことによりす...
HTML

JavaScriptで画像のヒストグラムの正規化

概要 画像のヒストグラムを正規化するコードの紹介 サンプルソース /** * メイン * @param {Object} canvas * @param {Object} image */ function main(canva...
スポンサーリンク
HTML

画像のヒストグラムを表示する Chart.js JavaScript canvas

概要 画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。 ヒストグラム算出のサンプルコード ヒストグラムの表示にChart.jsを使っています。 インストール npmを使っている場合は次のようにinstallしま...
HTML

画像のプーリング処理 canvas + JavaScript

概要 JavaScriptで画像のプーリング処理を行ってみました。 プーリング処理について プーリングは畳み込みに似た処理で、CNNでも重要な役割があります。 画像を圧縮する役割を果たします。 平均プーリングやmaxプーリングといったものが...
HTML

JSで画像をまとめて読み込む(プリロードする)

概要 JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。 サンプルコード let imagesUrl = [ "/path/to...
HTML

画像にモザイクをかける JavaScript canvas デモあり

概要 JavaScript + canvasでブラウザでアップロードした画像にモザイクをかけるデモを作成しました。 デモ画像 スライダーを動かし、モザイクの粒度を決めます。 例えば、10と選択した場合は 10ピクセル x 10ピクセル でモ...
HTML

回転ルーレットを作る JavaScript + canvas

概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。 ライブラリとかは使っていません。 デモ まずはデモをみてください。 外...
HTML

文字列のAAを自動生成 デモ + サンプルコード JavaScript

概要 文字列から文字列のAA(アスキーアート)を自動生成するデモを紹介します。 サンプル画像 普通のアルファベット平仮名漢字を変換してみました。 ↓実際の文字列↓ (端末・ブラウザなど、環境によっては正しく表示されません) ...
HTML

全角かな or カナを半角カナに変換する【JS】

概要 全角かなもしくは全角カナを半角カナに変換するサンプルコードとデモを紹介します。 デモ 外部リンクで開く サンプルコード HTML
...
HTML

canvas上のマウス座標を取得する。【JS】

概要 HTMLのcanvasの上でマウスを動かした時の座標の取得方法を紹介します。 考え方 canvas上のマウス座標 = window上のマウス座標 - canvasの左上の座標 という考え方で取得します。 サンプルコード 以下のよう...
HTML

JavaScript + canvasで砂嵐を描画する サンプルコード

概要 JSとcanvasで砂嵐を描画するサンプルコード紹介します。 動作環境 chrome 61~ デモ 外部ウィンドウで開く サンプルコード main() function main() { var canvas1 = docum...
HTML

csvをmarkdownのテーブル & HTMLに変換するスクリプト

概要 VueJSとmarkedJSでcsv形式のデータをmarkdownのテーブルもしくはHTMLのテーブルに変換するスクリプトを作りました。 デモ 新しいタブで開く ソース
CSS

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

概要 mavonEditor + Vue.js で作るMarkdownエディタについての紹介です。 また、用意されているAPIなどについて少し紹介します。 mavonEditor 中国語と英語のドキュメントが用意されています。 またデ...
HTML

JavaScript + canvasで画像変換処理をするときのスニペット

概要 canvasはJSによって図形などを描画する際に使われます。 canvasに描画された画像はピクセルに対して参照・操作することが可能なので、 これを用いて画像変換処理を行うことができます。 デモ画像 この記事では自分がよく使うス...
CSS

JSでルーレットを作った。

概要 だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。 DEMO デモ | 別ウィンドウで開く 以上。 追記 2019/01/20 ↑これだと流石にお粗末すぎるので、回転するルーレットを作りました...
CSS

semantic uiでブログカードっぽいものをたくさん作ってみる。コピペでOK

概要 最近UI周り触れる機会があったが、 今更Bootstarpに手をつけるのも嫌なのでsemantic uiを始めることにしました。 そこで、 今回はオシャレブログとかのindexページでよく見かけるカード型UIのデザインをseman...
HTML

HTMLの中からaタグ・imgタグのリンクだけを抽出するツールを作った【JS】

概要 HTMLの中からaタグ・imgタグのリンクを抽出するツールを作りました。 a href抽出 img src抽出 HTMLテキストをコピペするとaタグ・imgタグのリンクを抽出します。 pythonのスクレイピング関連ツール(bs4...
HTML

【JavaScript】K-meansを使って画像を減色する。全てフルスクラッチ【canvas】

概要 K-menasで画像を減色してみた。 JavaScript + canvasを使用。 OpenCVとかライブラリは使わず全てフルスクラッチ K-means クラスタリングなどを行う際の定番なアルゴリズムです。 Wikipedia...
CSS

【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】

概要 前回に引き続き 凸包(グラハムスキャン)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia 凸包を解くためのアルゴリズムは様々な...
スポンサーリンク
タイトルとURLをコピーしました