- JavaScript 画像をクリックして色を抽出
- 画像をクリックするとクリックした部分の色の情報を抽出するサンプルです。 いわゆるカラーピッカーをJSで実装しています。 まず画像をcanvasに変換します。 マウスでクリックされた部分のピクセルの画像データを抽出し、色の情報...
- 2020-09-22 13:39:02
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
画像
画像を扱うサンプルいろいろ。
「画像」に関するサンプル
- JavaScript 画像の色からカラーチャート
- JacaScriptでJPG画像をCanvasに変換し、色情報を解析、抽出するサンプルです。 抽出した色をカラーチャートのようにjQueryで整形してみました。 色の情報はRGBAで抽出されます。 Aは透明度なので今回は無視。 重複する色はユニー...
- 2020-09-21 18:13:36
- JavaScript 画像をcanvasに変換する
- imgタグで呼び出した画像をcanvasに描画するサンプルです。描画の際にリサイズもします。 表示した画像をCanvasに描画します。 imgの元画像は600pxですが、CSSで200pxにしているので、canvasでも200pxに合わせてリサイズしています。 このサンプ...
- 2020-09-13 14:10:15
- HTML Base64エンコードで画像を表示
- 画像をテキストデータに変換してimgタグで表示させるサンプルです。 普通のimgタグでPNG画像を掲載する場合 [[<img src="/img/article/294/2020-04-18-181228.png">]] これはサーバにアップされた画像...
- 2020-04-18 18:12:02
- CSS 画像をフィルターするアニメーション
- 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ...
- 2019-11-15 17:47:52
- CSS 画像の切り取り
- 画像をCSSで四角く切り抜くサンプルです。 画像の編集ソフトは不要です。 CSSの「clip」を使います。 加工した画像と切り抜いた画像を重ねると目を引く演出ができます。 CSS下記にまとめて記...
- 2019-08-22 15:46:12
- CSS 画像のぼかし、補正
- CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画...
- 2019-07-30 22:28:24
- jQuery 画像遅延読み込みのサンプル
- たくさんの画像を読み込ませるとき、ファーストビュー以外は後で読み込ませるというサンプルです。 jQueryのプラグインでlazyloadという画像を後から読み込ませるプラグインもありますが、それを使わないで自作します。 いろんなオプションは必要ない 細か...
- 2019-08-08 00:56:46
- NodeJS 画像をHTMLで表示する
- NodeJSを使って、HTMLを読み込み、画像を表示するサンプルです。 JSをサーバサイドで実行することで、そのJSが置いてある配下のディレクトリから画像を読み込んでくるコードです。 とりあえずapp.jsとか名付けました。 [[...
- 2019-07-29 05:41:20
- jQuery 自動ドア風アニメーション
- 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス...
- 2019-07-29 07:56:24
Top