Posts with tag: #javascript

画像を2値化する JavaScript + canvas 【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 デモ サンプルソース 概要 JavaScriptで画像を2値化するサンプルコードの紹介。 デモ https://s-yoshiki.github.io/Gasyori100knockJS/#/questions/ans…
Read more →

画像をグレースケールに変換する JavaScript + canvas 【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 グレースケール変換式 デモ サンプルソース 概要 JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。 グレースケール変換式 ここではグレースケール画像変換式は次のように定義しています。 デモ ここからデモを試すことができます。 https…
Read more →

画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 実行イメージ デモ ソース 概要 JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。 やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。 変換すると以下のような画像になります。 環境はJavaScript…
Read more →

ブラウザ上でWindowsXPが動く??

2019-03-28
javascript%E5%B0%8F%E3%83%8D%E3%82%BFreactwindows
目次 紹介 エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demohttps://t.co/mjBg4pkgNa pic.twitter.com/s0bkHFyKHO — s-yoshiki…
Read more →

JavaScriptで画像処理100本ノックに挑戦してみた

2019-03-27
javascriptcanvas%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86vue.js%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 画像処理100本ノックについて JavaScriptで挑戦してみる デモサイト GitHub フロントの実装について 問題の解説 JSで挑戦するメリット・デメリット 関連 画像処理100本ノックをJavaScriptで挑戦してみました。 Qiita…
Read more →

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで

2019-02-24
javascriptvue.jswebpacknode.js
目次 概要 検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.…
Read more →

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

2019-01-24
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%A2%E3%82%B6%E3%82%A4%E3%82%AF
目次 概要 デモ画像 デモ サンプルソース 概要 JavaScript + canvasでブラウザでアップロードした画像にモザイクをかけるデモを作成しました。 デモ画像 スライダーを動かし、モザイクの粒度を決めます。 例えば、10と選択した場合は 10ピクセル x 1…
Read more →

JavaScript canvasで扇型を描画するサンプル

2019-01-20
javascriptcanvas
目次 概要 解説 デモ 概要 canvasで扇型を描画するサンプルを紹介します。 解説 https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc 扇型はCanvas API…
Read more →

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

2019-01-17
html5javascriptcanvas%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88
目次 概要 デモ 簡単な解説 扇型の描画 減速 ソース 概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stop…
Read more →

JavaScriptによる画像処理と便利なライブラリ

2019-01-14
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwebassemblyfabric.jsclmtrackrpico.js
目次 概要 Canvas APIについて ImageDataについて 基本的な画像変換 物体検出 顔検出 顔検出 + フィッティング OpenCV と WebAssembly fabric.js 概要 JavaScript + canvas…
Read more →

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

2019-01-03
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 サンプル画像 デモ デモ解説 ソース HTML JavaScript 解説 概要 文字列から文字列のAA…
Read more →

3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】

2019-01-02
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 3次元の回転行列 回転行列のサンプルコード 画像を回転させるデモ 結果 参考 概要 JavaScriptを用いて、3次元の回転行列で画像を回転させるサンプルを紹介します。…
Read more →

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

2018-12-28
html5javascript
目次 概要 デモ サンプルコード HTML JS 概要 全角かなもしくは全角カナを半角カナに変換するサンプルコードとデモを紹介します。 デモ サンプルコード HTML JS
Read more →

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

2018-12-26
html5javascript
目次 概要 考え方 サンプルコード デモ ソース 参考 概要 HTMLのcanvasの上でマウスを動かした時の座標の取得方法を紹介します。 考え方 ** canvas上のマウス座標 = window上のマウス座標 - canvas…
Read more →

深さ優先探索アルゴリズムを実装 部分和問題を解く

2018-12-25
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0atcoder
目次 深さ優先探索について 部分和問題を解いてみる 問題 サンプルコード デバッグ 例題: AtCoder ABC015 C 解説 ソースコード おまけ : 2進数を利用して 深さ優先探索について 深さ優先探索(depth-first search)は探索手法の一つです。 DFS…
Read more →

素因数分解を行うプログラム サンプルコード JS/PHP

2018-12-24
javascriptphp%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0atcoder
目次 概要 サンプルコード JavaScript PHP 概要 ある任意の正の整数の素因数を配列で返すサンプルコードを紹介します。 サンプルコード JavaScript パターン1 : 純粋な素因数分解 デバッグ パターン2 : 指数部と仮数部に分ける デバッグ PHP
Read more →

【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coco-ssd

2018-12-18
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86TensorFlow
目次 概要 オブジェクト検出 試す サンプルコードと解説 scriptタグで始める coco-ssd API デモ デモのサンプルコード 参考 概要 TensorFlow.js+coco-ssdを用いて、…
Read more →

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

2018-12-12
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 動作環境 デモ サンプルコード canvasの各ピクセルへの参照方法 おまけ 概要 JSとcanvasで砂嵐を描画するサンプルコード紹介します。 動作環境 chrome 61~ デモ 外部ウィンドウで開く サンプルコード ちょっとだけ解説。 canvas…
Read more →

10進数からN進数に変換するプログラム

2018-12-06
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
目次 概要 N進数を求めるプログラム ソース 実行すると... 参考 概要 ある任意の10進数からN進数に変換するプログラム(JavaScript)を紹介します。 N進数を求めるプログラム ソース ある任意の10進数xをn…
Read more →

iOSかAndroidかの判定 UserAgentを利用する 【JavaScript】

2018-11-18
javascript
目次 概要 サンプルソース UAのサンプル 参考 概要 JSでiOSかAndroidかの判定を行う方法。 サンプルソース やっていることは、UAに特定の文字列が含まれているかどうかという方法で端末を判断しています。 で返り値が1以上であれば、iPhone…
Read more →

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

2018-11-18
html5javascript
目次 概要 デモ ソース 概要 VueJSとmarkedJSでcsv形式のデータをmarkdownのテーブルもしくはHTMLのテーブルに変換するスクリプトを作りました。 デモ 新しいタブで開く ソース
Read more →

複数キーでソートするサンプルコード JavaScript

2018-11-05
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0node.js
目次 概要 サンプルソースとソートのパターン 2列目と3列目で昇順ソートする 概要 JavaScriptでの複数キーでソートするサンプルソースの例。 サンプルソースとソートのパターン 以下のような配列があるとする。 2列目と3列目で昇順ソートする ソース 結果
Read more →

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

2018-10-14
html5css3javascript
目次 概要 mavonEditor セットアップ カスタマイズ デモ コード APIの紹介 プロパティ ツールバー イベントメソッド おまけ : mavonEditorのサイズの固定 概要 mavonEditor https://github.com/hinesboy…
Read more →

3つ以上の整数の最大公約数・最小公倍数を求める JavaScript

2018-10-14
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
目次 概要 最大公約数 2つの整数の最大公約数を求める 3つ以上の整数の最大公約数を求める 最小公倍数 2つの整数の最小公倍数を求める 3つ以上の整数の最小公倍数を求める 概要 JavaScriptで…
Read more →

NodeJSでsitemapをパースしてURLを抽出する。

2018-09-25
javascript%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0node.jssitemap
目次 概要 環境 + 利用したもの 実装 実装で気をつけたポイント シンプルに配列を返すパターン 非同期実行にする場合 出力 概要 NodeJSでsitemap.xmlからURLを抽出する方法のメモ。 ちょっとググるとsitemap-stream-parser…
Read more →

Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】

2018-09-23
javascriptatcodermonaco%20editor
目次 概要 デモ 他のJavaScript製エディタと比べて 追記 2019/05/04 参考 概要 https://tech-blog.s-yoshiki.com/2018/08/435/ 以前書いた「【JavaScript】AtCoder…
Read more →

WebAssemblyのデモ。特に注目すべきデモを集めてみた。

2018-09-21
javascriptwebassemblygoogle%20chrome
目次 概要 SLコマンド Qt Vim OpenCV + knn matchデモ Unity 概要 WebAssemblyのデモ。特に注目すべきデモを集めてみました。 基本的にはChromeかFireFox、safariでしか動かないものだと思います。 SLコマンド http…
Read more →

OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。OpenCV.js

2018-09-16
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwebassemblynode.js
目次 概要 環境 使用するもの OpenCV4.0.0(pre) Emscripten LLVM OpenCV.jsの紹介 About LLVMとEmscripten チュートリアル OpenCV.jsのビルド 環境のセットアップ Emscripten OpenCV…
Read more →

JS + Canvasで画像をプルプルふるわせる。

2018-09-13
javascript
目次 概要 デモ ソース その他 概要 canvas + JSで画像をプルプル震わせる。 デモ ソース その他 setTimeout使ってるあたりがダサいですね。Promiseが使えるよう勉強します。
Read more →

【JavaScript】角度を16方位に変換するソースコード

2018-09-11
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A016%E6%96%B9%E4%BD%8D
目次 概要 ソース 概要 与えられたある角度を16方位に変換する。 よくありがちな処理としてこんなものがあります。 JSの場合、 IEEE75…
Read more →

tesseract.js + canvasを組み合わせてOCRを行う

2018-09-09
javascript
目次 概要 実装 imageDataオブジェクト DEMO 概要 tesseract.jsはWebブラウザで動くOCRエンジンです。オフィシャルサイトからデモをみることができると思います。 フロントのjsで動かす場合、canvas…
Read more →

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

2018-09-03
html5javascript
目次 概要 ソース グレイスケール 2値化 ネガポジ変換 ガンマ補正 デモ サンプルコード 関連 概要 canvasはJSによって図形などを描画する際に使われます。 canvas…
Read more →
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

最新の投稿

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

CentOS6(Docker)でyum update できなくなった
エラー内容 対応 CentOS6.10 で yum update しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

PostfixでメールリレーしてMailHogで受信する開発用Dockerコンテナの構築
環境 Dockerイメージ作成 コンテナの起動 telnetで送信テスト phpで送信テスト Postfixのリレーを介して送信されたメールをMailHog(開発用SMTPサーバ)でキャッチするDocker開発環境を構築した際のメモです。 環境 Docker…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

Tags

Dates

© 2021   404 motivation not found