スマホのブラウザで画像を圧縮してポストする - Qiita
この記事は スマホのブラウザで画像を圧縮する手順メモです したかったこと スマホでブラウザから画像をアップロードさせたかったです 最近の高性能カメラだと画像サイズが大きすぎて非常に重くなってしまいました サーバサイドで圧縮する方式だと結局アップロードの通信量は変わらないから効果がありません 対処 ブラウザ上で画像を圧縮して対応することにしました image-comporessorというJavaScriptライブラリを使います 内部的にはCanvasとか使って圧縮をしているみたいです 別にスマホじゃなくてもモダンブラウザなら動きます 対処コード FormDataオブジェクトを生成 Ajax送信でのみ利用できる操作しやすいFormオブジェクトみたいなもの FormのDOMを渡して生成する input type=fileから画像ファイルオブジェクトを取得して、ImageCompressorに渡し
Elastislide Revised | Codrops
Elastislide, the responsive image carousel, has been updated and improved. It can be used vertically or horizontally and a minimun number of visible images can be specified. We’ve updated Elastislide, the responsive image carousel. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what opt
iPhoneの傾きを使って見せ方を変える画像ビューワー·lenticular.js MOONGIFT
lenticular.jsはiPhoneの傾きにあわせて表示を変える画像ビューワーです。 iPhoneなどのスマートフォンでは傾きを検出できる機能があります。それを使った面白い画像ビューワーがlenticular.jsです。 美女が布を巻いて立っています。マウスを動かしてみましょう。 マウスの動きにあわせてくるくると回ります。 左右はもちろん上下にも動きます。 こちらはおっさん。おっさんも動きます。 車。これは面白い見せ方です。 こちらはiPhone版。 格段に大きい写真でくるくる。 iPhoneで車を表示した場合。 タネを明かせば当然画像がたくさん作られています。 lenticular.jsはたくさんの画像をマウスや加速度センサーの動きにあわせて差し替えることで動きを演出しています。フレームをより細かくすればするほど滑らかに動くようになります。 lenticular.jsはJavaScr
オフラインで使えるPLACEHOLD.IT·Holder.js MOONGIFT
Holder.jsはJavaScriptだけでダミー画像を生成するソフトウェアです。 Webサイトのモックアップを作る際に使われるのがダミー画像です。PLACEHOLD.ITがよく使われますが、オンラインでないと使えないというのが若干不便に感じていました。そこでオフラインでも使えるJavaScriptによる画像生成ソフトウェア、Holder.jsを紹介します。 ダミー画像が並んでいます。面白いのはこれがクライアントサイドで生成されているということです。 Holder.jsではサイズを表示するのはもちろん、別な文字を画像の上に表示したり、色を変える事もできます。テーマを定義することで一括して画像の配色を変更する事も可能です。何よりネットワークにつないでいない状態で使えるのは便利です。 Holder.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェ
画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」:phpspot開発日誌
Holder.js - client side image placeholders 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」 <img src="holder.js/300x200"> と書くとcanvasを使い、指定したサイズの画像をクライアントサイドで描画してもらえるというもの。 JSなのでサーバ不要でオフラインでも作業できます。 こうした画像をよく使う方は、いちいち作るのは面倒なので、JSコードで書いて画像化できたらなかなか便利ですね 関連エントリ HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 ブラウザ上でPDFを表示するJSライブラリ「PDF.js」
画像をクライアントサイドだけでクールに変身·SeuratJS MOONGIFT
SeuratJSは画像をピクセルアートに変換するRaphaëlプラグインです。 従来Webサイトにおいて画像は表示して終わりでしたが、HTML5/Canvasの登場によってクライアントサイドでも編集できるようになってきました。そこで紹介したいのがSeuratJSです。画像をモザイクなどのピクセルアートに変換します。 元の写真です（右側）。 じゃじゃーん。丸と四角のモザイクになりました。 こちらも元画像。 アニメーションもつけられます。 こんな画像も… 面白い！ デモです。アニメーションをお楽しみください。 SeuratJSの面白さはサーバサイドの仕組みを使っていない点にあるでしょう。複雑なアニメーションを式だけで実現したり、ステップ数の指定もできます。Webサイトのトップなどで使ったりすると効果的かも知れません。 SeuratJSはJavaScript製、MIT LicenseまたはGPL
[JS]ローカル環境でも利用できるダミー画像を生成するスクリプト -Holder.js
サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。 Holder.js -GitHub [ad#ad-2] Holder.jsのデモ Holder.jsの使い方 Holder.jsのデモ 対応ブラウザ Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。 Chrome 1+ Firefox 3+ Safari 4+ Internet Explorer 9+ Holder.js [ad#ad-2] Holder.jsの使い方 使い方は、2ステップです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="holder.js"></script> Step 2: HTML ダミー画像を設置したい場所にimg要素で記述します。
JavaScript Canvas Image Conversion
At last week's Mozilla WebDev Offsite, we all spent half of the last day hacking on our future Mozilla Marketplace app. One mobile app that recently got a lot of attention was Instagram, which sold to Facebook for the bat shit crazy price of one billion dollars. Since I wouldn't mind having a bill in my back account, I decided to create an Instagram-style app (which I'll share with you in the futu
HTML5を使ってこんなことも。Googleマップ風の画像ビューワー·Bigshot MOONGIFT
Bigshotは巨大な画像をタイル状に分解し、Googleマップのようなビューワーで閲覧するソフトウェア。 BigshotはHTML5/Java製のオープンソース・ソフトウェア。デジカメが高性能化するのに伴って、撮影できるサイズが大きくなっている。とは言え写真を閲覧するディスプレイのサイズは決まっているので、大きな写真ではズームしたりしなければならない。 写真をズームして閲覧する 極端に大きな写真では全体のダウンロードだけで時間を要してしまう。そこで考えてみたいのがGoogleマップライクに写真をタイル状にし、必要な部分だけ拡大するという方法だ。それを実現するライブラリがBigshotになる。 BigshotはHTML5/JavaScriptを使って画像を表示する。マウスのスクロールでズームイン/アウトが可能で、マウスのドラッグで見る場所を切り替える事ができる。Java製のツールで予め写真
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでローカル画像を表示する方法
GitHub - fengyuanchen/compressorjs: JavaScript image compressor.