[B! canvas] kihanのブックマーク

kihan id:kihan

canvasに関するkihanのブックマーク (5)

html2canvasを使って画像をキャプチャする · polidog lab++
こんばんは。このブログにabで負荷テストしてたらうっかりadsense消すのを忘れて、アボセンスされた僕です。さてさて、今日は皆様に超便利なhtmlキャプチャライブラリをご紹介しようと思います。 html2canvas こいつを使えば簡単にサイトの画像をキャプチャーできてしまうわけです。でキャプチャするときにcanvas or svgとし出力できるんですが、svgは重い・・・。僕のクロームだとなぜかエラーで落ちたりも。。。で、やっぱりcanvasよりもjpgとかpngがいいわけですよ。 webサイトを簡単にjpgとかpngでキャプチャを出来たらものすごく便利じゃないですか。もちろんこのhtml2canvasを使えば簡単にできてしまうんです。 html2canvas(document.body,{ onrendered: function(canvas) { var dataURI
kihan 2014/04/20
html2canvas

canvas
リンク
[HTML5] Canvasの表示内容にフィルターをかける（コントラスト） - YoheiM .NET
こんにちは、@yoheiMuneです。今日も引き続きCanvasで画像フィルターのお話。今日は、コントラストを変化させるFilterについてブログを書きたいと思います。 CanvasでFilterについて Canvasでは、表示内容のビットマップデータの取得／変更を行うことが可能です。その機能を用いて、画像にいろいろな効果を加える実装を行っています。本記事以外にも、CanvasでのFilter処理を記載しております。 - Canvasの表示内容にフィルターをかける（輝度） - Canvasの表示内容にフィルターをかける（グレースケール、ネガポジ反転）コントラストを変更する画像のコントラストを変化させることで、写真をくっきりとさせたり、ぼんやりしたりさせることができます。コントラストを上げると各ピクセル上の色味がはっきりとして、コントラストを下げると色味の変化が減りぼんやりした
kihan 2014/04/20
canvas

フィルター

エフェクト
リンク
canvas.drawImageで貼り付け先のサイズを調整する | iconDecotter-Log
位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。 drawImageメソッドの引数で貼り付けサイズを指定する scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける transf ormメソッドでcanvasの変形をしてから、drawImageで貼り付ける 1についても、位置調整と同様、drawImageの引数を変化させるだけでOKです。2、3はいずれも変形マトリックスの調整になりますが、使うメソッドが違います。単純に拡大縮小するだけであれば2の方が簡単です。 drawImageメソッドの引数で貼り付けサイズを指定する drawImage(image, dx, dy, dw, dh)と、dw、dhの引数を指定すると、貼り付け先のサイズを指定することができます。元画像に対して縦横比を維持して拡大縮小する場合は、dw、dhをそれぞ
kihan 2014/04/20
html5

canvas

drawImage
リンク
画像を組み込む - Canvas - HTML5.JP
Canvasでは、JPEGやPNGといったブラウザに対応した画像であれば、それを組み込むことができます。このコーナーでは、画像の組み込み方法と、いくつかのオプション機能について紹介していきます。画像組み込みの基本 Canvasで画像を組み込むためには、drawImageメソッドを使います。与える引数に応じて、描画する画像の扱い方が違ってきます。 ctx.drawImage(image, dx, dy) ctx.drawImage(image, dx, dy, dw, dh) Canvasの座標 (dx, dy) を左上端として、image に格納されたImageオブジェクトを描画します。dw と dh が指定されると、画像は、dw を横幅、dh を縦幅としたサイズに伸縮されます。 ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) 元
kihan 2014/04/20
html5

canvas

drawImage
リンク
File APIで選択した画像をCanvasに描画する - @thorikiriのてょりっき
<input type="file">で指定したファイルを取得するのは、ev.target.filesで取得出来ます。複数選択することも可能なように出来るので、配列になっています。今回は1つだけです。後はFileReaderを使って読み取って、Canvasに描画します。FileReaderのonloadでImageのsrc属性に取得したdataURLを設定する。ImageのonloadでcontextにdrawImageすればいいですね。サンプルコードは次の通り。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>画像表示</title> </head> <body> <div id="wrapper"> <input type="file" name="file" id="file"> <div
kihan 2014/04/20
file api

canvas
リンク
1