マインドマップは、中央のメインアイデアから始めます。思考を巡らせながらサブトピックを無制限に作成し、色分けしてわかりやすさとスタイルを加えることができます。マップが形になってきたら、添付ファイルや埋め込みメディアなどでトピックに前後関係を追加します。MindMeisterの機能を使えば、初めてのマインドマップでも創造力を最大限に発揮できます。
Mind Mapping Software - Create Mind Maps online
マインドマップは、中央のメインアイデアから始めます。思考を巡らせながらサブトピックを無制限に作成し、色分けしてわかりやすさとスタイルを加えることができます。マップが形になってきたら、添付ファイルや埋め込みメディアなどでトピックに前後関係を追加します。MindMeisterの機能を使えば、初めてのマインドマップでも創造力を最大限に発揮できます。
変幻画像作成（クリック推奨画像作成）
Create a transparent PNG file changing from white-background to black-background Any image file is OK. Please upload two files. The picture can be used for Twitter Twitter official client (PC, mobile browser) show image file on white background on timeline. But if you click or tap the picture, bigger image is shown on black background. So it can be seen differently if the image has transparent par
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
画像ライブラリGrappyの作成と、ImageMagick, GDとの比較【実装編】 | 株式会社サイバーエージェント
概要 簡単な画像処理機能も備えた、シンプルかつ高速そしてAnimationGIFをサポートした画像形式変換ライブラリの Grappy を実装した。 これの性能について、ImageMagick, GDと、下記の比較を行った。 SSIMによる画質の比較 処理速度 Valgrindを使ったヒープメモリの使用量 ファイルサイズに関して 最後にそれらとの比較結果から、Grappyの優位性について述べた。 1.はじめに 画像のエンコード・デコードやリサイズといった処理をサービスに組み込もうと考えた場合、多くの場合は高レベルな画像処理をサポートした既存のライブラリの利用を検討することとなる。 しかし、既存のライブラリは機能と速度のバランスが悪く、使いにくいものであった。 Webサービスの中に画像関係の機能を取り入れる場合、求められるのは次のような単純な要求項目に限られる場合が多い。 JPEG, PN
覚えておきたいDevToolsのコマンドラインAPIまとめ - Qiita
DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや
『任意のデータをピクセルとして画像に埋め込んでみた』
こんにちは、Morino(@kohei_april20)と申します。（だいぶ前にFlashの代替としてのHTML5というエントリを書いて今回２回目です） ちょっと前にスマホブラウザ向けのサービスでアバターを動かすアニメーションの仕組みが必要になった時がありました。それでボーンアニメーションやパラパラ漫画形式のアニメーションのスプライトシートによるアニメーションの仕組みを、Flashのアニメーション素材を元に生成して再生する仕組みを作ったりしていたのですが、その時に画像データにピクセルの色データとしてメタデータを埋め込む仕組みを作ったのでそれの紹介をしたいと思います。（ここ扱う画像はアルファ有りのPNG画像です） 特徴 スプライトシートアニメーションは通常スプライトシート画像とメタデータの少なくとも２つのデータを配信する必要があるのですが、このメタデータを画像データに突っ込んでしまえば一気に
Canvas に描いた画像を png などの形式の Blob に変換する方法
canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているので すが、残念ながら Chrome にはまだ実装されていませ ん。そこで下記の方法 を使って png や jpeg など、任意の画像形式で Blob を作ることができます。 /*** canvas に絵を書くコード ***/ var type = 'image/jpeg'; // canvas から DataURL で画像を出力 var dataurl = canvas.toDataURL(type); // DataURL のデータ部分を抜き出し、Base64からバイナリに変換 var bin = atob(dataurl.split(',')[1]); // 空の Uint8Array ビューを作る var buf
(JavaScriptでの)バイナリデータの送信と受信 - yoya's diary
Sending and Receiving Binary Data https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data 場所変わったので↑https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data 「JavaScript バイナリ」でググっても古い情報ばかり見つかるので、ついカッとなって勢いで翻訳しました。 多分精度は低いのでおかしい所は指摘を頂けると嬉しいです。すぐ直します、恥ずかしいので。 初めに追記 (2013/04/27) 本家の方に翻訳文を移しました。↓こちらの文章の方が精度が高いのでお勧めです。 バイナリデータ
ファイルサイズを考慮した Canvas の保存 : document
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target
PNG軽量化の減色と圧縮について | GREE Engineering
このテーブルの番号は 1 Byte になっているため、0-255 の 256 個しか登録できません。そのため、画像で使用されている色が 256 個より多い場合は、なんとかして 256 個にしなくてはいけません。 この「なんとかして 256 色にする」というのが減色処理で、なるべく元の画像からの変化を分からないようにしながら色を減らしていくためのアルゴリズム実装です。（この記事では減色アルゴリズムについての説明は省略します。） テーブルを作成したら、画像のそれぞれのピクセルを RGB 形式からテーブルの何番目の色を使うかに置き換えます。 上図のように、1 ピクセルあたり 24bit 必要だった画像が 1 ピクセルあたり 8bit になったので、データサイズは大体 1/3 になります。 （パレットのデータに最大 3 Byte * 256 = 768 Byte 必要とか、同じように圧縮されないと
FlashをHTML5として変換するクラウドサービス - JswfPlayer
JswfPlayer ver2をリリースしました。 swf2jsライブラリをベースにActionScript3.0に対応し、機能が大幅に拡張されています。 お問い合わせはコチラ よくある質問はコチラ JswfPlayerはFlashファイルをHTML5に 変換するクラウドサービスです。 簡単！Flashファイルをアップロードしてタグを張り付けるだけでFlashプレーヤーが入っていない スマートフォンやPCでもFlashサイトを表示できます。 【その他】利用規約の内容は？ JswfPlayerの利用規約は、[こちらのページ]にてご確認いただけます。 【デモ/ご契約】開発中のFlashでも再生できるか確認したい Adobe Flash(R)で使用できる検証用エクステンションをご提供しております。貴社で制作されたFlashがJswfPlayerで再生できるか検証できる便利な検証ツールです。 「F
Picasaウェブアルバムのサムネイルカスタマイズのまとめ｜mattintosh note (跡地)
サムネイルをカスタマイズするには パラメータにサイズ指定がある場合はサイズ指定が最優先になります。その後、トリミングまたは回転を指定、埋め込み指定、HTMLモード指定と続きます。 img要素のsrc属性の値を書き換えます。background-imageなどでも利用出来ます。 サムネイルの長辺を144pxに指定する場合（Picasaウェブアルバムのテンプレート） https://lh6.googleusercontent.com/（中略）/s144/image.png サムネイルの長辺を640pxに指定して90度回転させる場合 https://lh6.googleusercontent.com/（中略）/s640-r90/image.png 画像の中央を正方形にトリミングしてサイズを320pxに指定する場合 https://lh6.googleusercontent.com/（中略）/s3
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
GitHub - piqnt/svgexport: SVG to PNG/JPEG command-line tool and Node.js module
AA of fujiwara-san