ローカル フォルダー内の画像を読み込んで表示するための 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 コマンドの詳細な説明
推薦する
CSS3 すりガラス効果
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
Nginx+Apache の動的および静的分離の導入の詳細な例
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
更新SQL文に基づくMySQLロックの理解
序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...
GoogleとFacebookがDockerを使わない理由
この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...
Vue が価格カレンダー効果を実現
この記事では、価格カレンダー効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...
mysql replace into の使用法の詳細な説明
replace ステートメントは、一般的に insert ステートメントに似ています。ただし、テーブ...
Linux カーネル デバイス ドライバー Linux カーネル モジュールの読み込みメカニズム メモの概要
#include <linux/moduleparam.h> 1. モジュールパラメータ...
MySQL 最適化: キャッシュ最適化 (続き)
MySQL 内部には至るところにキャッシュがあります。MySQL のソースコードを読むと、キャッシ...
MySQLの遅いクエリ問題の詳細な分析データ送信
例を通して、MySQL のデータ テーブル送信のクエリが遅い問題の解決策を共有しました。最近、コード...
Doubanウェブサイトのウェブサイトコンテンツに小さな変更を加える方法
<br />読みやすさはウェブサイトにとって非常に重要な部分であり、ウェブサイトの核心と...
HTML テーブル境界コントロールの詳細な説明
上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...
バックエンド サーバー プロキシとして Nginx を推奨する理由 (理由分析)
1. はじめに実際のサーバーはパブリックインターネットに直接公開されるべきではありません。そうしな...
デザイナーはコーディングを学ぶ必要がありますか?
多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...
制限を使用すると、MySQL のページングがどんどん遅くなるのはなぜですか?
目次1. テスト実験2. 制限ページング問題に対するパフォーマンス最適化手法2.1 テーブルをカバー...
html 内の絶対パス URL と相対パス URL、サブディレクトリ、親ディレクトリ、ルート ディレクトリ
絶対 URL は、インターネット上の特定のファイルに必要なすべてのコンテンツを表すために使用されます...