ローカル フォルダー内の画像を読み込んで表示するための HTML サンプル コード
|
一つの目的 Html ページでローカル フォルダーを選択すると、フォルダーとそのサブフォルダー内のすべての画像が自動的に読み取られ、ページに表示されます。 テクニカル分析: 問題
解決： Web API インターフェース FileReader の readAsDataURL メソッドを呼び出してデータ (関数パラメータ file タグで取得したファイル パス) を読み取り、そのデータを FileReader (base64 形式) に読み込みます。その後、Img を使用してソース データを base64 形式で指定し、画像を描画できます。 2番目のコード
<!DOCTYPE html>
<html>
<ヘッド>
<title>ReadImageDemo</title>
</head>
<本文>
<input type="file" id="selectFiles" onchange="dealSelectFiles()" 複数の Webkit ディレクトリ>
<キャンバスid="myCanvas" 幅=1440 高さ=900></キャンバス>
<script type="text/javascript">
var imgPosX = 0;
var 画像の幅 = 256;
関数 dealSelectFiles(){
/// 選択したファイルを取得します。
var selectFiles = document.getElementById("selectFiles").files;
for(var file of selectFiles){
コンソールにログ出力します。
/// ファイルの内容を読み取ります。
var リーダー = 新しい FileReader();
reader.readAsDataURL(ファイル);
reader.onloadend = 関数(){
/// 取引データ。
var img = 新しい画像();
/// ローダーの後、result にファイル コンテンツの結果が格納されます。
結果:
img.onload = 関数(){
var myCanvas = document.getElementById("myCanvas");
var cxt = myCanvas.getContext('2d');
cxt.drawImage(画像、imgPosX、0);
imgPosX + = imgWidth;
}
}
}
}
</スクリプト>
</本文>
</html>3つの効果
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Linux での scp および sftp コマンドの詳細な説明
推薦する
MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法
パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...
Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法
会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...
Docker で Docker0 ブリッジのデフォルトのネットワーク セグメントを変更する方法
1. 背景Docker サービスが開始されると、デフォルトで docker0 ブリッジが作成され (...
MySQL 8.0.13 手動インストールチュートリアル
この記事では、MySQL 8.0.13の手動インストールチュートリアルを参考までに紹介します。具体的...
JavaScriptコールバック関数の詳細な理解
目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...
ウェブページ内の 2 つのボックス モデル (W3C ボックス モデル、IE ボックス モデル)
Web ページ ボックス モデルには 2 種類あります。 1: 標準 W3C ボックス モデル。2:...
ツリー チャートの実装方法に関する Echarts チュートリアル
ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...
MySQL Installer Community 5.7.16 インストール詳細チュートリアル
この記事では、MySQL インストールの詳細なチュートリアルを記録し、全員と共有します。 1. バー...
HTTP および HTTP コラボレーション Web サーバー アクセス フロー図
Web サーバーは、独立したドメイン名を持つ複数の Web サイトを構築できるほか、通信経路上のトラ...
JavaScript でサウンド効果付きの花火効果を実装する
コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...
HTML要素のID属性とName属性の違い
今日、私は <a href="#13"></a> につい...
MySQL の高可用性アーキテクチャの完全な説明: MHA アーキテクチャ
目次1. はじめに2. 構成3. 作業プロセス4. 建築5. 表示例MHA (Master HA) ...
Dockerがコンテナを起動するたびに、IPとホストが指定した操作が実行されます。
序文Dockerを使ってHadoopクラスタを起動するたびに、ネットワークカードの再バインド、IPの...
CSS 属性セレクタを使用して HTML DNA を接合する方法
CSS 属性セレクターは素晴らしいです。大量のクラス名を追加することを回避し、コード内の問題を指摘す...
MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...