タグ

JavaScriptとimageに関するNeanのブックマーク (7)

  • 『javascriptで画像処理してみよう(1)〜OpenCVjs〜』

    画像処理だけで飯がえるかっ!? 主にコンピュータ関連の話題中心にしていこうかと思ってますがどうなるかは不明です。 写真の加工や顔認識といった画像処理の話題が多くなるかと思います はじめまして。京都の会社で画像処理エンジニアをしてますsakiyamaKです。 いつからかinstagramとかで写真をお洒落に加工するフィルタが流行りだして、ずっと興味があったので自分のプログラムで再現できないかと調べてみました。 で、一応コツがつかめる程度には再現できたんですが、いかんせん画像処理といえばC言語系でやるのが普通です。でもそれだとウェブ系の人たちにウケが悪そうだなと思ったんで、まずjavascriptの画像処理ライブラリを作ってみました。 名づけてOpenCVjs! 名前の通り画像処理ライブラリのデファクトスタンダードであるOpenCVjavascript移植版です。 せっかく作ったんで誰かに

    『javascriptで画像処理してみよう(1)〜OpenCVjs〜』
  • JPEG画像からExif情報を抽出する - 箱入りあじゃらの日記

    JavaScript初めにこのネタ既出\(^o^)/Nihilogic : Javascript EXIF Readerでもせっかくだし公開してみる。ajalabox/exifjs - GitHubhttp://ajalabox.6.ql.bz/exif/sample.html使い方FileReaderのreadAsArrayBufferとかXHR2のresponseTypeに"arraybuffer"指定したりとかして、Exif Format(要するにJPEGファイル)のArrayBufferをとってくる。そしたら exif = Exif.loadFromArrayBuffer(arraybuffer); もっとためになる使い方GPS情報しか使わないと思うので、そこをメインに。上の例のexif.gpsifdにGPS情報が入ってて、座標を表すのが次の4つのプロパティ。latitudeRef

  • 家系図、ER図、UML。JavaScriptでダイナミックに図を描く·Joint MOONGIFT

    JointはUMLや家系図、ER図などをダイナミックに描くJavaScriptライブラリ。 JointはJavaScript製のオープンソース・ソフトウェア。Webでは簡単に表現できることから、テキストベースでのコンテンツが多い。だがテキストに溢れたWebサイトというのは見ていて疲れてしまうものだ。グラフがあるとインパクトも大きい。 家系図 だがデータベース等にあるデータをWeb上で表現するのは大変で、サーバ側での何らかのライブラリが必要になるケースが多い。そこで使ってみたいのがJointだ。 JointはJavaScriptで図を描くライブラリで、多彩な種類に対応している。例えば家系図、ER図、各種UML、DEVS、ペトリネットなどだ。さらにオブジェクト同士の接続方法も多様に用意されており、直線や曲線など多彩にある。接続を指し示すときの矢印すら数多い。 マウスで動かせる さらに面白いのは

  • 簡単!PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト

    なかなか凄いぞ! jQueryとPHPのモジュールで簡単に動いてしまった。 画像をアップロードして、カットしたいところをドラッグ。 その部分が指定したサイズになってクリップされるという代物。 因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。 仕様 必要なものは、PHP4もしくはPHP5。 そしてPHP GD ライブラリがサーバーにインストールされている必要がある。 逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。 仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。 そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。 ダウンロードは以下 ページ下部にある以下のリンクから。 ダウンロードした後は

    簡単!PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト
  • [JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify

    画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置(上・下)、表示のスピード、不透明度、表示方法(フェード・スライド・常設)、クラス名などが変更できます。 キャプションはデザインを適用したものを表示することも可能で、下記のようにdiv要素を使用することもできます。

  • [JS]簡単に画像のプレビューを設置できる超軽量スクリプト -imgPreview

    HTMLの構造はそのまま変更なく、idやclassを指定するだけで簡単に画像のプレビューを設置できるスクリプトをJames Padolseyから紹介します。 imgPreview demo デモでは、テキストのリンクに記述された画像をAJAXにて表示し、アンカーのホットスポット上でマウスに追随します。 スクリプトのオプションでは、リンク元のテキストの不透明度、プレビュー画像のサイズ、プレビュー画像の不透明度とスピードなどが調整できます。 imgPreviewはjQueryのプラグインのため、実装にはjquery.jsが必要です。

  • フォームで落書きを投稿できるようにするJavascriptライブラリ『<input type="draw" />』 | P O P * P O P

    ユーザーや読者から落書きや手書きのデータを集めたい、というときに使えそうな画期的なライブラリ。 簡単なスクリプトを仕込むだけで、マウスでぐりぐり描いたデータを投稿させることができます。 ↑ こんな感じです。 アイディア次第でかなり面白いことができるのでは。チュートリアルおよび使い方の詳細は以下のサイトをご覧ください。 » – The simplest draw editor to your forms

    フォームで落書きを投稿できるようにするJavascriptライブラリ『<input type="draw" />』 | P O P * P O P
  • 1