タグ

HTML5と画像処理に関するCherenkovのブックマーク (3)

  • 【レビュー】HTML5 Canvasで画像を白黒化する方法 | エンタープライズ | マイコミジャーナル

    Basically, we’re a small design agency located in Montreal, Canada. HTML5 Canvas Image Effects: Black & White - SpyreStudiosにおいて、HTML5のCanvas機能を使って画像を読み込み、さらにその画像を白黒画像に変換して表示する方法が紹介されている。Canvasを使ってどのように画像加工処理を実施するかのテンプレートとして参考になる。 紹介されている機能はソースコードを見るとわかりやすい。次に、HTML5 Canvas Image Effects: Black & Whiteで紹介されているコードを参考にサンプルとして実行しやすくしたものを掲載する。HTMLファイルと同じフォルダに、コードの下に掲載した画像のリンク先に表示される元画像をbeer.jpgファイルとして置

  • HTML5+JavaScriptで画像処理 ハーフトーニング - 御手洗特急途中下車

    HTML5とJavaScriptでハーフトーニングをしてみました. 実行ページ http://jstap.web.fc2.com/test/html5/halftoning/halftoning.html ※ 濃度パターン法は低速なので注意してください. ソース http://github.com/kojo-sugita/Halftoning ハーフトーニングとは多値階調を持つ画像を2値(あるいは少ない階調)で表現する方法のことである. マンガのスクリーントーンやモノクロプリンタで出力された画像などがまさにソレで点の密疎で濃淡を表現する. 今回実装した手法は以下の3通り.いずれも基的な手法である. 濃度パターン法 (density pattern method) 画像の1画素に対して複数画素からなる2値表現のパターンを割り当てて濃淡を表現する手法. 例えば1画素を4×4のパターンを割り当

    HTML5+JavaScriptで画像処理 ハーフトーニング - 御手洗特急途中下車
  • HTML5のcanvasで作る画像フィルター (1/6)

    現在の主要なWebブラウザーには、グラフィックを自由に描画できる「canvas」機能が用意されています(Internet Explorerを除く)。canvasは、W3C(World Wide Web Consortium)で策定が進んでいる「HTML5」に含まれる新しい要素です。HTML5の仕様はまだ正式に決まっていませんが、canvasは仕様策定の早い段階から盛り込まれていたため、すでに多くのブラウザーに実装されています。また、canvasへの対応が遅れているInternet Explorer(IE)でも、「ExplorerCanvas」などのJavaScriptライブラリーを使えば、ある程度の機能をエミュレートできます。 canvasのサンプルでは、円や四角形のような図形を描画するものをよく見かけますが、今回のJavaScriptラボでは、ビットマップ画像をピクセル単位で加工する「画

    HTML5のcanvasで作る画像フィルター (1/6)
    Cherenkov
    Cherenkov 2010/07/05
    これから作る人へ。Firefoxだけかもしれないけど、drawImage、getImageDataはimgObj.onload中に書かないと動作しないので注意。
  • 1