perspective.js (alpha version) demo (static) - HTML5.JP
[English] perspective.js は、Canvas で矩形イメージを任意の四角形に変形することができる JavaScript ライブラリーです。遠近法を使ったイメージを描きたい場合に使います。元となる矩形イメージとして HTMLImageElement オブジェクト (<img> のオブジェクト)だけでなくHTMLCanvasElement オブジェクト (<canvas> のオブジェクト)も扱うことができます。 perspective.js は変形処理の速度より変形後の画質を優先しています。そのため、アニメーションには適しているとはいえません。しかし、できる限り、パフォーマンスを改善してきました。小さなイメージであれば、うまくいくでしょう。 これはまだ作っている途中のものです。今でもこのライブラリーの改善を続けています。完成したら、HTML5.JP で、このライブラリーを
SVGヤバイ - 最速チュパカブラ研究会
canvas を苛めていたら気づいたことがあったので書きます。（この記事は2011年5月現在の情報です。あなたがこの記事を読んでいる時点で、より新しくて良い方法が無いか確認して下さい） 基本的な話 canvas には、図形を描画する機能だけでなく、描かれている内容を読み取る機能があります。getImageData を使うと、canvas の内容をピクセル単位で読み取って画像処理をかけたりできます。また、toDataURL を使うと canvas の内容を Data URI として出力でき、サーバに送信したりできます。 しかし、この機能にはリスクがあります。例えば、悪意のあるページを開いただけで、社内SNSにしか公開していないあなたの顔写真を canvas 経由で抜き取られるかもしれません。そういう事が起きないように、他のサイトから読み込んだ画像が canvas に描画されている場合（以下、
iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ＆フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File API、HTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 （略） ファイルを選択したあとは何ができるか... action による Multipart post Ajax （XMLHttpRequest 2） を使用したファイル送信（プログレス表示にも対応） File AP
JSで画像に落書きする - TakiTakeの日記
画像が一つ飛ばしになるの修正 canvas要素で遊ぼうってことで、画像に落書きできるスクリプト書いてみました。 使い方 windowのロードイベント後に以下のコード読み込んで下さい。 firebug入っているなら、コンソールに貼り付けて、実行でおｋ。 pixiv辺りが画像多くて狙い目。 ペイントの鉛筆と同じ要領で絵が描けます。 右クリックから画像の保存も可能。 firefox3で動作確認してます。 Canvas = function(img) { if(!img) return; var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var flag = false; canvas.width = img.width; canvas.height = img.height;
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
Saving canvas data to image file
This is a small library that lets you easily save a WHATWG canvas element as an imagefile. Files needed: canvas2image.js, base64.js Draw on the canvas with the pretty boxes below using the mouse, then click the "Convert" buttons to convert it to a downloadable image - or the "Save" buttons to download the image file directly. Using the WHATWG canvas element, you can create all sorts of cool gr
『[JavaScript][Firefox] ブラウザのスクリーンショットを撮る』
でんさんの開発部屋 自分がつまずいた点の解決法や、技術動向などをメモ書きとして残しつつ 見てくれた人の知識として役立ってくれればいいなと切に願っているサイトです。 今回はFirefox上で表示しているWebページのスクリーンショットを作成し、 PNGファイルとして保存する方法を紹介します。 この操作は、Firefoxの拡張機能で作成しなければなりません。 ちなみに、拡張機能の作り方についてはここではふれません。 スクリーンショットの取得する方法は非常に簡単です。 canvasオブジェクトを使います。 まず、htmlオブジェクトとしてcanvasオブジェクトを作成します。 var canvas = window._content.document.createElement("canvas"); この作成したcanvasに大きさを与えます。 canvas.setAttribute("heig
![『[JavaScript][Firefox] ブラウザのスクリーンショットを撮る』](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b4d4ebf951db94de2991f256e406dd98d93328e/height=288;version=1;width=512/https%3A%2F%2Fstat.profile.ameba.jp%2Fprofile_images%2F20101103%2F14%2Fd7%2F67%2Fj%2Fo020002001288763787914.jpg)
SVGをCavnasで利用する方法
という書き方が許されるのですが、残念ながらFirefoxやChrome、Safariといった他のメジャーなブラウザではこの方法は対応しておりません（そもそも仕様違反です）。というわけで、ちょっとひねった方法を使う必要があります。 <!DOCTYPE html> <html><head><title>SVGをCanvasで利用する</title> <script> var svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n' + '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' + '<g transform="matrix(0.0298614501953125,-0.00541687011718
JavaScriptでJPEG画像を読み込んで表示·jpgjs MOONGIFT
jpgjsはJavaScriptによるJPEG読み込みライブラリです。 JavaScriptによるバイナリハックは今なお熱い分野です。今回はJPEGファイルを解析、表示を行うjpgjsを紹介します。 左から順番に通常のJPEG、プログレッシブ、グレースケールとなっています。 jpgjsでは指定したJPEGファイルを解析し、Canvas上に描画しています。現状のままでは普通に表示したのと変わりませんが、エンコーダーが実装されるとWeb上でJPEGファイルを加工したり生成したりできるソフトウェアが作れるようになります。 jpgjsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザで扱える画像系のリソースとしてはJPEG/GIF/PNG/SVGがあります。SVGやCanvasで描いたものをPNGで出力でき
John Resig - OCR and Neural Nets in JavaScript
A pretty amazing piece of JavaScript dropped yesterday and it’s going to take a little bit to digest it all. It’s a GreaseMonkey script, written by ‘Shaun Friedle‘, that automatically solves captchas provided by the site Megaupload. There’s a demo online if you wish to give it a spin. Now, the captchas provided by the site aren’t very “hard” to solve (in fact, they’re downright bad – some examples
Camara support in HTML5 and JavaScript
With the rapid advancement of web technologies, web developers now have access to a plethora of features once confined to native applications. One such feature is accessing the device's camera directly from the web browser using JavaScript. This capability opens up a world of possibilities for creating interactive and immersive web experiences. Whether you're building a video conferencing app, a p
ちょっとした工夫。ブラシ風入力にするだけでここまでスムーズな絵が描ける·HTML5 Canvas Brush Sketch MOONGIFT
HTML5 Canvas Brush Sketchはマウスの入力をブラシ風にして滑らかにドローできるソフトウェアです。 iPadやWebブラウザ上で絵を描く際に試してみたいのがHTML5 Canvas Brush Sketchです。単純にマウスを動かした線を引くのではなく、ブラシ風に描いてくれます。 こちらはライン版。普通にマウスの軌跡を描きます。 こちらはブラシ版。ぐっと良くなっています。 デモ動画です。 ちょっとした工夫と言えるかも知れませんが、目を塗りつぶしたりする際に効果を発揮しています。これなら失敗を気にせずさくさく描けそうです。 HTML5 Canvas Brush SketchはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこう見る Skitchというアプリケーションがあります。今は
HTML5 + JavaScriptで画像処理 (エッジ検出) - 御手洗特急途中下車
古籏一浩のJavaScriptラボ ― 第14回 HTML5のcanvasで作る画像フィルター を読んで、Canvasで画像の輝度値を編集できることを知ったので、ためしに実装してみることに。 GUIや画像の端の処理などかなり手抜きだが、Firefox、Google Chrome、Operaで動作することを確認した。 処理はかなり重く、私の非力なマシンは実行するたび悲痛なファンの音を上げるほどである。。。でもしょうがないよね（´・ ω・｀） ちなみに3種類のブラウザで最も実行速度が早かったブラウザはOperaであり、もっとも遅いブラウザはFireFoxだった。 HTML5 + JavaScriptによるエッジ検出 http://jstap.web.fc2.com/test/html5/filtering/filtering.html 実行結果 ソースコード 2011/04/24追記 以下は古
Rails3.1の初期化プロセスを細かく追いかけたRailsGuidesの記事を和訳したよ:ミームの死骸を越えてゆけ
This domain may be for sale!
前から気になってたHTML5について色々調べてみました - もとまか日記
先日、ドコモのAndroid端末である「GALAXY S」を予約したわけですが、そうなると気になるのが、ずーっと前から気になってたHTML5について。これからスマートフォンが普及するにつれて、無視出来ない技術であるのは誰の目にも明らかなのではないでしょうか。 てことで、HTML5について調べてみたメモです。 HTML5の概要まずは難しいことは抜きにして、概要を読んでみると分かりやすいです。 HTML5, きちんと。この記事だけで十分です。長くもなく、文字も少ないので非常に入りやすいです。 HTML5仕様関連一応ですが、仕様について。 HTML5.JP - 次世代HTML標準 HTML5情報サイトHTML 5 ― HTML 4 からの変更点 (http://www.w3.org/TR/html5-diff/ 日本語訳) 必要に応じてみればいいので、細かくは見てません。 基礎知識概要が理解出来
HTML5 + Canvas + JavaScriptによるWebベースの顔認識「ccv」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
ccvはHTML5とCanvasタグを使ってWeb上で顔認識を行う。C言語によるライブラリもある。 [/s2If] ccvはWebベースまたはC言語製のオープンソース・ソフトウェア。最近の写真管理ソフトウェアの流行として顔認識がある。デジカメやプリンタでも顔認識機能を搭載し、自動的に明るくしたりするものもある。風景写真なども良いが、やはり人が写っている写真のが楽しいのだ。 そんな顔認識技術はWebベースでも提供されるようになっている。特にFacebookのようにSNSの中で使う場合は友人を自動認識させることでより活発な交流を促せるのだ。Webベースでの顔認識をHTML5/Canvasで行うのがccvだ。 実行例 via Tibetan Girl near Mount Everest | Flickr - Photo Sharing! ccvは元々C言語で開発されているコンピュータビジョンラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG OPEN
GitHub - blueimp/JavaScript-Canvas-to-Blob: JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.
SVG OPEN
GitHub - canvg/canvg: JavaScript SVG parser and renderer on Canvas
