画像データにJavascriptコードを埋めるサービス作ってみた | SIBYL System
こちらはJavaScript Advent Calendar 2015の17日目の投稿として書いたものです。 画像データにJavascriptコードを埋め込む事ができる「JS in PNG」というウェブサービスを公開しました。 http://js-in-png.9×4.net/ なぜ作ったのか 今年1月に投稿された、以下の「JavascriptをPNGに圧縮する」という記事に触発されて作ったものです。 JavascriptをPNGに圧縮する http://yomotsu.net/blog/2015/03/01/js2png.html 詳細は上記のサイトを見ていただければと思いますが、画像の1画素を1文字としてJavascriptのコードを画像に埋め込んでいるものです。イメージは以下のようになります。 こちらはJquery 2.1.3 minfyを画像に圧縮したものです。おもしろいですね。と
JPEG画像にJavaScriptのコードを埋め込んでみる | みどりのさるのエンジニア
JPEG画像にJavaScriptのコードを埋め込む手法が紹介されていたので試してみました。 今回は次の画像に対してコードの埋め込んでみます。 注意 この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としており、実験も仮想環境上で実行しています。 決して外部サイトに対して実行しないようにしてください。 画像のバイナリを見てみる 今回試す方法は画像のバイナリを変更してコードを埋め込んでいます。 そこで、最初は画像のバイナリを確認してみます。 $ hexdump -C donarudo.jpg | head -n 5 00000000 ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 |......JFIF......| 00000010 00 01 00 00 ff e1 00 6c 45 78 69 66 00 00 49 49 |..
ウェブでアニメーションGIF作成
アニメーションGIFがウェブで簡単に作成できます。 アニメーションGIF作成 ウェブで簡単アニメーションGIF作成。画像は最大50枚指定できます。 透過色、画像の重ね方、リピート回数、ウェイトタイム(持続時間)、縮小処理など様々な設定が出来ます。 処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。
Twitter画像原寸表示ブックマークレット
Twitter画像原寸表示ブックマークレット 以下のブックマークレットのリンク（■の後にあるリンク）を、右クリック→「このリンクをブックマーク」などでブックマークに追加して使用してください。 ■ Twitter画像原寸表示 v1.151105 機能 Twitter公式画像投稿機能でアップロードされた、「pbs.twimg.com/」で始まるURLの写真やイラスト等が単独で表示された状態で使用すると、拡張子の後に何もないか末尾に「:large」「:thumb」が付与されている場合に、URLの末尾を「:orig」に変更してオリジナルサイズの画像に移動します。 同様に「pbs.twimg.com/」で始まるURLの画像を含むツイートのページ（URLが「twitter.com/アカウント名/status/ツイート番号」になっているページ）で使用すると、その画像のURLに「:orig」を付与してオリ
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
画像ページからGoogle画像で検索を一発で開くブックマークレット
Google画像で検索 javascript:(function(){if(!location.href.match(/\.(png|jpg|jpeg|gif)$/)){return;}a="https://www.google.co.jp/searchbyimage?hl=ja%safe=off&site=search&image_url="+location.href;document.location=a;})(); 画像を開いて上のブックマークレットを実行すると、Google画像で検索の結果ページを開きます。 アイコンのキャラや元絵を見たいときに便利です。
FirefoxのContent-Type敏感問題にグリモンで対策する（yahoo ブログ 画像 文字化け） - Cherenkovの暗中模索にっき
OCNのブログサービス「ブログ人」で画像をupすると何らかの理由で拡張子が付かないことがある。 するとfirefoxユーザに問題が発生する。 この問題の影響を受けるユーザ OCN、yahooでブログを書いてるユーザ 掲示板やチャットで画像URLをやりとりするユーザ この問題による現象 例えばココの画像のURLに直接アクセスする場合 http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041524000 http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041525000 http://rnc.blogzine.jp/photos/uncategorized/2008/09/04/200809041518002.jpg 上二つの拡張子が無い画像は文字化
完全に状況を掌握した画像の遅延読み込みの実現 - latest log
IE8の挙動について追記しました。 IE8は、img.complete は 画像読み込みでも true になりません(falseのままです)。 そのかわり、img.readyState が "complete" になります。 JavaScriptでの画像の動的/遅延読み込みといえば (new Image).src = URL; なんですが、 タイムアウトやエラーの状況を把握したい時もあったりします。GoogleMapライクなアプリを作ってるときとか。 今回ちょっと必要になったのでまずは調査から。 以下のコードで、存在しないファイル(missing.jpg)を読み込ませ、実行経路を確認してみます。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://w
[JavaScript] dataスキームURI生成（画像データのBase64変換）
Greasemonkey のユーザスクリプトなどの JavaScript ソースコード内に画像データを埋め込める、 『data:image/gif;base64,～～～』形式のデータ（dataスキーム）を生成します。 画像ファイルなどのバイナリデータを Base64 エンコードに変換しています。 data スキーマでは、外部ファイルへのアクセスなしにスクリプト内で完結して画像を表示できるため、 小さなアイコンなどの表示には便利です。data スキームは Firefox・Opera では利用できます。 残念ながら Internet Explorer は data スキームに対応していないので利用できません。 やってみよう 画像URL: ▼ ▼ JavaScript ソースコード生成結果: ここにソースコード結果が表示されます。 ▼ data スキーム経由の画像表示: 生成したコードの使い方
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌
異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。 普通に並べるとちょっと残念なことに。空白ができちゃいます。 プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。 まず、必要な
にひりずむ::しんぷる:Amazonの拡大機能で見れる最大の画像を表示して保存できるブックマークレット書いた
Amazonの拡大機能っていうのは、たぶん2月あたりから導入された、GoogleMapっぽいアレです。 クリックするとズームアップされてちょっと楽しいですね！ でも、なんだかんだでクリックするのめんどくさいですね。 どうせならでかい画像を見たいです。 そんなわけで、最大画像を表示して、保存できるようにするブックマクレット書きました。 Amazon.co.jp： Cagayake!GIRLS(初回限定盤): 桜高軽音部, 大森祥子, Tom-H@ck, 小森茂生 上みたいなページで、下記のブックマークレットを使用すると これが これになります これでいちいちクリックしてドラックして・・・とかしなくても、でっかい画像で見られるよ！ 画像はリンクになってるので、クリックした先で普通に保存できます。 あ、例によってFireFoxでしか確認してませんのであしからず Sleipnirでも動いたみたいで
ジョジョの奇妙な並替（ならべかえ） | class-exe
Warning: file_get_contents(./wp-content/plugins/add-yaruo-template/.txt) [function.file-get-contents]: failed to open stream: No such file or directory in /home/pqrs7/www/ce/wp-content/plugins/add-yaruo.php on line 49 ランダムに並べ替えてあるよ。荒木飛呂彦先生の顔写真を正しい順序で並べ替えてね。あってればスタープラチナがオラオラオラオラするよ。幕末の写真も増やしてみたよ。わかるかな。
IE+JavaScriptで#02050aが透過されるバグ│JavaScript│グラビカ学習帳～ホームページ制作会社 gravity works（グラビティ・ワークス）の備忘録と知識の共有と蓄積
JavaScript（jQuery）を使って画像をフェードさせていたところ、 フェード中のいくつかの画像に白い点々が出ているのを見つけました。 （ディスプレイのドット落ちのような・・） 調べてみたところIEのバグのようです。 いろいろな方の記事で書かれているのを見ると、 発生条件は以下のような感じ。 ・JavaScript の filter:alpha(opacity); を使用 ・JPEG画像を使用 ・#02050a の色を使用 要するに、#02050a を含むJPEG画像をJSで透過させると、 #02050a の箇所だけが完全に透過JPEGになってしまう、 というバグのようです。IEのみ。 解決策としては 1. PNG画像などにする 2. #02050a を使わない 3. 背景色を #02050a にする となりますが、 何故かPNG画像にしただけでは直らず・・ 結局、PNG画像 ＋
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
https://liuliu.me/detect/detect.html