Resizing and Cropping Images with Canvas | Codrops
Learn how to resize and crop images using JavaScript and the HTML5 Canvas element using controls, commonly seen in photo editing applications. In this tutorial we’re going to learn how to resize and crop an image using the HTML5 <canvas> element, and while we’re at it, let’s create some fancy controls for resizing, commonly seen in photo editing applications. In a real world example a website or a
画像をコピペできるようにした
画像をコピペできるようにした クリップボードに画像がコピーされているときに、textareaでペーストすると画像がアップロードされるようにした。 画像をコピーするには Macで画像をコピーするには、Chromeで開いているときに右クリックしてコピーするとか、Preview.appなどで画像を開いてCommand + Cでコピーできる。Finderでコピーしても画像の中身がコピーされないので注意。Command + Shift + Control + 4を押せば画面をキャプチャできてキャプチャ結果がクリップボードにコピーされるので、画面のキャプチャを貼りたいならそれも便利。 コピペ時の振る舞いを実装するには ChromeとFirefoxにpasteイベントが用意されているのでそれを使う。ペーストされた内容物はevent.clipboardDataというインターフェースを通してBlobの配列と
iOSなどのスマートフォンのブラウザ側でリサイズをおこないファイルアップロードを爆速にする - 僕は発展途上技術者
iOS 6 より Safari からファイルをアップロードできるようになり、写真投稿が必要なウェブサービスで、投稿のためだけにアプリを用意する必要はなくなったかなあ、と最初は思っていました。 ところが、iPhone 5 などで撮った写真などはファイルサイズが結構大きく、Safari からアップロードするときはそのままのサイズで送るため、外出先で 3G だとアップロードにものすごく時間がかかってしまい、ほとんど使い物になりません。 そこで、アップロード前にブラウザ側で写真をリサイズできる方法はないかと探したところ、 » IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously - Stack Overflow で紹介されていた »
データのビジュアリゼーションに使えるJSライブラリ「d3.js」:phpspot開発日誌
d3.js データのビジュアリゼーションに使えるJSライブラリ「d3.js」 ユニークで様々なビジュアリゼーションが可能になっており、更にアニメーションしたりインタラクティブな要素を盛り込めるのも特徴 次のようなデータビジュアリゼーションをjavascriptのコードを使って描画でき、サンプルコードなんかも公開されています。 IEには対応していませんが、かなり色々なことができるので覚えておいてもよいかも。 関連エントリ 色々と使えそうなグラフや図が描けるビジュアリゼーションライブラリ集 データの様々なヴィジュアリゼーションが可能なFlexライブラリ「birdeye」
JavaScriptをGPUで高速化する試み、モジラがJetpackで検討中 － Publickey
モジラが、JavaScriptをGPUのパワーを借りて高速化する試みを行っています。FirefoxのJetpackプロジェクトに協力しているメンバーがブログにポストしたエントリ「Elevating JavaScript Performance Through GPU Power」で、その可能性と方法について触れています。また1つ、JavaScriptの可能性が広がるかもしれません。 Mozilla Labs » jetpack » Blog Archive » Elevating JavaScript Performance Through GPU Power Webでは高精細な動画や音声などがやり取りされるようになり、またセカンドライフのような3次元表示など、Webブラウザ上で行われる情報処理は高度化しています。 今後はさらに動画の加工や音声認識のような高度なアプリケーション、あるいはW
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
Normal Mapping with Javascript and Canvas
Update: Newer WebGL based version This is an old experiment. I created a newer much faster webgl powered library for you to play with this technique. It's called normalmap.js. It allows you to easily apply normal mapping for interactive lighting effects in javascript. Original Article I made a little experiment with normal mapping and phong shading in javascript which turned out to work quite well
でお絵かき->DBに保存->PHPで表示->(ﾟДﾟ)ｳﾏｰ - TakiTakeの日記
きっかけ canvasタグ上に描いた絵を保存しようとしたら、 意外に情報が見つからず苦労したんで、載せときます。 canvas? まず、canvasやHTML5についての仕様は、以下のサイトを見てください http://www.html5.jp/ 流れ 今回は、フリーハンドで描いた絵を保存します。 canvasタグを用意 お絵かき 画像情報をサーバに送り、DBに保存 DBから画像情報を取り出し表示 (ﾟДﾟ)ｳﾏｰ なお、DB関係の記述は省略します。 canvasタグを用意 <html> <head> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/canvas.js" type="text/javascript"></script> <style type="text/css">
Sketchpadの様なJSで描画を行うツール「Harmony」 - 強火で進め
Sketchpadを初めて観たときはおどろかされました。 そのSketchpadほどではないですがそれでもかなり面白いJavaScriptで作成されたツールを公開しているサイトを見つけました。 Harmony - Procedural drawing tool http://mrdoob.com/lab/javascript/harmony/ 色々なブラシで描画ができるみたいですが特にRIBBONっていうブラシを使うとなかなか面白い絵が描けます。オススメです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper.js
hinata.in