ローカル フォルダー内の画像を読み込んで表示するための 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 コマンドの詳細な説明
推薦する
jsはシンプルな計算機を実装します
参考までに、ネイティブjsを使用して簡単な計算機（詳細なコメント付き）を実装します。具体的な内容は次...
CentOS7仮想マシンがインターネットにアクセスできない問題を解決し、CentOS7仮想マシンが静的IPを使用してインターネットにアクセスするように設定します。
最近、VMware 仮想マシンで CentOS を試していたのですが、インストール後にインターネット...
JavaScriptの詳細な分析と方向の変更方法
目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...
Docker で Python スクリプトを実行する方法
まず、Docker イメージ用の特定のプロジェクト ディレクトリを作成します。例: mkdir /h...
Vue+Bootstrapでシンプルな学生管理システムを実現
参考までに、vueとbootstrapを使って比較的シンプルな生徒管理システムを作りました。具体的な...
DockerコンテナのIPアドレスを表示する方法
私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...
CSS3 は 3D キューブの読み込み効果を作成します
簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...
MAC 上の MySQL の初期パスワードを忘れた場合の対処方法
MACでMySQLの初期パスワードを忘れた問題を解決する方法を参考までに共有します。具体的な内容は次...
Docker がデータベースのデプロイに適さない 7 つの理由のまとめ
Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...
適応的な幅と高さを持つ9つの正方形グリッドの背景画像の切り取りの分析
<br />幅と高さが適応するオリジナルの 9 グリッド レイアウトをベースに、ネットワ...
異なるインデックスを更新してMySQLのデッドロックルーチンを解決する
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。
自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...
MySQL デッドロック シナリオ例の分析
序文最近、MySQL で RR レベルでデッドロック問題に遭遇しました。興味深いと思ったので、調べて...
Docker構成 Alibaba Cloud Container Serviceの操作
Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...
Vue v-model 関連の知識のまとめ
v-model は、入力とフォーム データ間、または 2 つのコンポーネント間の双方向データ バイ...