JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
React CanvasによるモバイルブラウザのUI改善とそれが起きる必然 - ワザノバ | wazanova
http://engineering.flipboard.com/2015/02/mobile-web/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 ものごとが進化すると、利用するユーザの満足度はあがるので、それを用意する作業量はツールの改善に従って最終的には減っていくのか？ スマホが登場して、アプリ上でのスワイプなどの直感的にできる操作や表現の幅が広がり、またディスプレイも改善。では、プロダクトをつくる側がそれに慣れてくると、作業量が減るのか？いや、現実は逆。同じことを実現する作業量は減っても、トータルでは減らない。ブラウザとアプリにまたがって、双方のメリットを取り込もうと、もっとレベルの高いUIを目指した競争が続いています。 David BellonaがTwitter Universityでの
古めかしいCGを描くためのライブラリ gretro です - 音の鳴るブログ
gretro - JavaScript graphic library for retro CG (2014.08.14) お試しページを作りました 最近、昭和っぽい気持ちのCGを描きたい感じで20年くらい前の本を参考にしながら 円 とか 線 とか描いて遊んでいたのだけど、古い本を参考したら昭和っぽい絵が描けるというわけではなくて、Canvas に描くとどうしてもモダンな感じになってしまうという問題があった。 昔は4096色中の16色しか使えないとか座標は整数のみとか色々制約があって、それでも絵を描くためにタイルパターン（2色を交互に並べたりして中間の色を出す）とか駆使していたのだけど、今の Canvas だと16777216色、透明あり、小数の座標、アンチエイリアスも利くとか表現力が格段に高くてちょっと描いただけですぐモダンな感じになってしまう。大は小を兼ねるとか言ってもちろん Canv
Canvas Fingerprintingはクッキーより怖いのか技術的に調べてみた｜TechRacho by BPS株式会社
morimorihogeです。最近忙しくて遠征すらおぼつかない状態です。夏イベント資源足りるのかこれ。 なんかはてブ界隈などでCanvas Fingerprintingの話題が出ていて、Cookieより怖い！とか、Adblockみたいに無効にする方法がないのにユーザトラッキングできて怖い！！といったアオリの記事がぽこぽこ出てきているようです。 でも、ざっと調べた限りの日本語のどの記事を読んでも、具体的にどうやってユーザ個々のトラッキングができるようになるのか、技術的に解説されている記事が見つかりませんでした。 というわけで、エンジニアとしてはここは一つキッチリ理解しておきたいと思い、調べた結果をまとめます。 もし僕の読解がおかしくて変なことを言っている部分があれば、はてブやTwitter、コメント欄などで指摘して頂ければ更新していこうと思いますので、マサカリ上等です ;) Canvas F
自動車免許.club - このウェブサイトは販売用です！ - 自動車免許 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Same-Origin Policy とは何なのか。 - 葉っぱ日記
ちょっと凝ったWebアプリケーションを作成していたり、あるいはWebのセキュリティに関わっている人ならば「Same-Origin Policy」(SOP)という言葉を一度は聞いたことがあると思います。日本語では「同一生成元ポリシー」あるいは「同一生成源ポリシー」などと訳されることもありますが、個人的には「オリジン」は固有の概念を表す語なので下手に訳さず「同一オリジンポリシー」と書いておくのが好きです。 さて、この「オリジン」とは何なのかという話ですが、これは「RFC 6454 - The Web Origin Concept」で定められており、端的に言うと「スキーム、ホスト、ポート」の組み合わせをオリジンと定め、それらが同じものは同一のオリジンとして同じ保護範囲のリソースとして取り扱うということです。 例えば、http://example.jp/fooとhttp://example.jp:
Fixture is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
faviconの色をcanvasで変える - 0xff.toBlog()
github と github:enterpriseさんのfaviconが見分けがつかないので、Chrome拡張で差し替えることにしました。 画像どうしようかとちょっと悩んだけど、色変えるだけでいいだろうとFireworksを起動するも、色を良い感じに変える方法がわからない…。 元が の通り、白黒なので、トーンカーブ的なものではダメそうで、諦めてcanvasでやることにしました。 var favicon=document.getElementsByTagName('img')[0]; var cv = document.createElement('canvas'); cv.width = 16; cv.height = 16; document.body.appendChild(cv); var c = cv.getContext('2d'); c.drawImage(favicon,
html2canvas - Screenshots with JavaScript
<div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> html2canvas(document.querySelector("#capture")).then(canvas => { document.body.appendChild(canvas) });
Canvasで巨大な画像をアニメーションする際はImageに埋め込んで保存しておく - mizchi log
概要 canvas画面外にあるものはレンダリングしない コストが高い画像を生成したならimg.src = canva.toDataURL()で突っ込んどく encahnt.jsやeasel.jsのコードを読んでいたら似たような仕組みがあったので参考にした。 (enchant.js、call,applyを多用していてキモかったんだけど、素のJSで継承を実装するとそんなもんだっけ…) 準備 canvasのプロトタイプを少し拡張している Color = Red : "rgb(255,0,0)" Blue : "rgb(0,0,255)" Green : "rgb(0,255,0)" White : "rgb(255,255,255)" Black : "rgb(0,0,0)" i : (r,g,b)-> "rgb(#{r},#{g},#{b})" Canvas = CanvasRendering
PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
More preview enhancements for Windows Azure AD Premium - Active Directory Blog - Site Home - TechNet Blogs
Microsoft is holding an AI Agents Hackathon, and we want to see what you can build with Python! We'll have 20+ live streams showing you how to build AI agents with Python using popular agent frameworks and Microsoft technologies. Then, you can submit your project for a chance to win prizes, including a Best in Python prize!
potraceをjavascriptに移植した - Webと文字
生存報告 （ ^ω^）とりあえず生きてます。 potraceとは potraceとはラスター画像からSVG等のベクター画像を作成するソフトです。無料で使えてソースも公開されているオープンソースなソフトです（参考資料１）。元はCで書かれていますが、python、ActionScript、C#に移植されていたりします。 だから何ができるの？ 左が元のビットマップ画像、右がそれをpotraceでトレースした画像 C→javascript(´・ω・`)、ActionScript→JavaScript(ﾟ∀ﾟ) ActionScriptとJavaScriptは兄弟みたいなものなので移植はとっても簡単です。今回は参考資料２をパクって参考にしてjavascriptに移植してみました。 処理フロー imgタグで画像を読み込み 画像をcanvasに転写 画像をグレースケールに変換 画像を二値化 画像の輪郭の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Flipboard/react-canvas: High performance <canvas> rendering for React components
GitHub - PexJS/PexJS: HTML5 Flash Lite 1.1 Runtime Engine
Next Mobile WebApplication
Learn web development | web.dev
IBM Developer
Android 4の新機能でカメラWebアプリ作ってみた (1/5)
文字を汚ない画像にするやつ作った - hitode909の日記
