斜めに写った画像をCanvasで矩形に補正する - すぎゃーんメモ
将棋駒画像分類の話の続きのような、あんまり関係もないような。 memo.sugyan.com memo.sugyan.com 結局、素材を組み合わせて自動で生成しただけの駒画像ではやはりデータが足りていないようで、「やはりもっと様々な画像から人力でラベル付けしてデータセットを作っていく必要がありそう」ということになった。 とはいえ、インターネットから画像を拾ってこようと思うと、例えば以下のような感じで (引用元: フリー写真素材ぱくたそ) 多少ならともかく 斜めの角度から写っているものは、そのまま矩形に切り出して学習用画像データに利用するのは難しそう。 これらはうまいこと変形して使いたい。 いわゆるperspective projectionの逆変換のような操作が必要になる。 JavaScriptを使ったCanvas APIでの変換では簡単な拡大・縮小などの変換は可能だけど こういったpe
tesseract.jsがスマホ上で動くOCRアプリケーションを作る - Qiita
初投稿です。 目標 スマホのブラウザとカメラで動く日本語OCRアプリケーションを作る。 経緯 会社で社内便（複数）の郵送を頼まれる事がある。その際、宛名読む→宛名から郵便受け番号への変換→宛名の郵便受けまで行って投函→宛名読む→...を繰り返す必要があり効率化したい。 ↓ 配達の前にPCで宛名を一括で打ち込み、郵便受けの番号リストを作成すれば良いがタイピングが面倒。 スマホのカメラで動くOCRなら便利そうだが、Google Cloud Vision APIの社内利用はセキュリティの問題もあって（多分）無理。 ↓ tesseract.jsなら入力情報を外部に送信しなくて良いので安全なのでは！？ AndroidとかiOSのアプリは作れないけどhtmlなら何とかなりそう！？ ↓ 今ここ ↓ 社員情報のAPIを使用した最短ルートの提案など... 作成物 作成物のデモ 処理速度の関係でiPhone
Vue.jsでカメラを使う - Qiita
やりたいこと (vue.jsで)写真を撮ってサムネをリスト表示したい。 リストはElementのコンポーネントを使用。 コンポーネントの使い方とファイルPOSTに関してはこちらに書いてます。 ロジック <video>で撮影 <canvas>でキャプチャ キャプチャをblob形式に変換してリストに追加 1~2の実装方法はこちらで紹介されています。 ポイントは<video>や<canvas>に'refs'属性をつけ、vue.js標準のrefsでアクセスして、 vueコンポーネントのdataにバインドさせてるとこです。....って書かれてます。 これに手順3を追加で実装。 今回使用したElementコンポーネントのプロパティ割り当てはこんな感じ。 １つ目はカメラで撮ったもので、２つ目はファイルを選択して追加してます。 ファイルを選択した場合はFileオブジェクトがrawプロパティに格納されている
治安の悪い Slack Emoji を作るツールを作った - Qiita
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
極小規模のフロントエンド開発をしてみたまとめ@2016年 - たまめも(tech)
とても久々に（というかわりと初めてまともに）HTML5 な Web アプリを作った気がするので、作ったものとやって捗ったことをまとめておく。 つくったもの 理研の仁科加速器研究センターさんの展示コンテンツ。 陽子・中性子の数を組み合わせて原子核を探してみよう、というもの。 まずはこちらをどうぞ: 原子核を見つけよう！ – 仁科加速器研究センター コーディングスタイル こちらを参照しながら生JSで書いてみた。 Google流 JavaScript におけるクラス定義の実現方法 AltJSは長くメンテするプロダクトではない＋重厚長大にはならないと判断しスルー。 ライブラリ Three.js three.js - Javascript 3D library JSで3Dを手軽に扱うためのライブラリ。Processingの3Dと似たかんじで書ける。 ただ重力（引力）が特定"方向"のみにしかかけられず
JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptを使って「グラフやチャートを描きたい！」とか、「さまざまなデータを可視化させたい！」という人にオススメのJSライブラリをご紹介しようと思います。 また、すぐに使い始められるように、ミニマムな構成の「サンプルコード」も合わせて掲載しているので、自分に合ったライブラリを使う取っ掛かりになれば幸いです。 ■Chart.js 【Chart.js】 最近、活発にバージョンアップをしている「Chart.js」は、すべてのグラフが自動的にアニメーション表示されるユニークな仕掛けを持っており、シンプルで理解しやすい記述が出来る点も魅力です。 グラフの種類は少ないものの、モダンブラウザ＆レスポンシブ対応で、あまりカスタマイズせずに「デフォルト」のままでも手軽に使えるでしょう。 【 基本の書き方 】 「chart.js」ファイルは、公式
HTML5/Javascriptの画像処理ライブラリまとめ
HTML5(Canvus)、Javascript向けの画像処理ライブラリについてまとめたので紹介します。 続きを読む
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
にひりずむ::しんぷる - わーい、JSX で canvas いじれたよー
ちょろっと修正 というわけで、blog の背景の canvas を JSX で書きなおしてみた。いま動いてるのは JSX でコンパイルした JavaScript です。 だいたい、チュートリアルとテストみたらできた。 まず、node と npm が必要なのでよしなにいれる $ brew install nodejs $ curl http://npmjs.org/install.sh | sh そしたら JSX のレポジトリから git clone して make setup $ git clone git://github.com/jsx/JSX.git $ cd JSX $ make setup これで jsx の開発環境が整いました！簡単ですね！！ ちなみに、いまは make install とかないので、とりあえずはこの落としてきたレポジトリで適当に開発することにした。 あとは、
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
GitHub - masakazu-yanai/char-canvas: Draw Tool for Ascii Art.