ローカル フォルダー内の画像を読み込んで表示するための 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 コマンドの詳細な説明
推薦する
HTML の基礎必読 - CSS スタイルシートの包括的な理解
CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...
MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策
1. インストール方法は？ 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...
my.cnf (my.ini) 重要なパラメータの最適化設定手順
MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...
ReactでuseStateを使用する詳細な例
使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...
HTML+CSS+jQuery はスクリーンショットで検索ホットリストタブ効果を模倣します
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
Kafka と Nginx の統合例
背景nginx-kafka-module は、Kafka を nginx に統合して、Web プロジ...
MySQL のロードバランサーとして nginx を使用する方法
注意: nginxのバージョンは1.9以上である必要があります。nginxをコンパイルするときに、-...
CSS3 を使用して入力複数選択ボックスのスタイルをカスタマイズする例
原則: まず入力要素を非表示にし、次に CSS を使用してラベル要素のスタイルを設定します (他の要...
Windows で MySQL 5.7.17 圧縮バージョンをインストールするときに遭遇する落とし穴
まず、Windows 64 ビット用の最新の MySQL 5.7.17 コミュニティ圧縮バージョンを...
Dockerサーバーのストレージリソースプール不足問題の解決
目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...
CSSは2つの要素をブレンドする効果（スティッキー効果）を実現します。
数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...
JS は複数のタブを切り替えるカルーセルを実装します
カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...
MySQL pt-slave-restart ツールの使い方の紹介
目次MySQL マスター スレーブ レプリケーション環境を設定する場合、マスター データベースとスレ...
MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル
1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...