HTML: img タグ: JavaScript
画像を表示する
TestJS_img_select01.html
画像リンクをクリックすると指定の div に拡大表示する。
CSS: flex
(参考) canvas タグに画像を表示する
TestJS_canvas_image_show01.html
HTML: canvas タグ
画像リンクをクリックすると指定の div に拡大表示する。
CSS: flex
(参考) canvas タグに画像を表示する
TestJS_canvas_image_show01.html
HTML: canvas タグ
img 画像をウインドの中央に表示する。 dialog タグのモーダルダイアログのサンプル。
HTML: dialog タグ
画像リストの HTML を作成する
- TestJS_textarea_read_imgurl01.html
textarea の URL リストを読んで画像を表示する。
textarea: テキストデータを読んで処理
HTML 要素を作成する
template タグのテンプレートを使って figure, img のリストを作成する。
HTML: template タグ
img サイズを設定する
- TestJS_img_resize01.html
画像をリスト表示。ボタンを押すと画像サイズを変更する。 - TestJS_img_resize02.html
画像の拡大縮小表示。画像のピクセル数に対して割合で指定する。 - マウスのスクロールホイールで拡大縮小は 「マウスで処理する」を参照。
画像ファイルを読んで img にセットする
- TestJS_fileapi_read_image_file01.html
ローカルの画像ファイルを読んで、img 要素にセットする。 FileReader のサンプル。
ファイル処理 FileAPI - TestJS_fileapi_ImageFile_img02.html
画像ファイルを読んで表示。ImageFile.js のテスト。
FileAPI、ドラッグ＆ドロップ、クリップボードからペーストの処理。
画像はマウスでドラッグ移動や拡大縮小ができる。
マウスイベント処理
クリップボードの処理
ドラッグ操作やマウスで処理する (2024/01)
img 画像をドラッグ操作で移動する。HTML の draggable 属性で処理する例。
draggable 属性でドラッグ操作する
- TestJS_mouse_img_drag02.html
img 画像をマウスでドラッグ移動する。MouseEvent で処理する例。
マウスイベント処理
スクロールホイールで拡大縮小表示する
- TestJS_img_resize_mouse_wheel01.html
マウスホイールで画像を拡大縮小表示する。 - TestJS_img_resize_mouse_wheel02.html
マウスホイールで img 画像を拡大縮小表示する。
クリックした場所を中心に拡大縮小する。スクロール (scrollTop, scrollLeft)で調整。 - TestJS_fileapi_ImageFile_img02.html
クリックした場所を中心に拡大縮小する。 img を absolute で配置し top, left で調整。