ローカル フォルダー内の画像を読み込んで表示するための 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 コマンドの詳細な説明
![MySQL 最適化のヒント: 重複削除の実装方法の分析 [数百万のデータ]](/upload/images/67cad825b6d2f.webp)
推薦する
Linux で txt を mysql にインポートする方法
序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...
HTML ページ スタイルの !-- -- の機能は何ですか?
主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...
NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。
Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...
IdeaでTomcatを起動したときに複数のリスナーが報告される問題を解決する
エラーのスクリーンショット例外が発生した場所が見つかりません。解決策: リソースディレクトリにlog...
Dockerfile を使用して Java ランタイム環境のミラーを作成する方法
現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...
SQL効率を分析する方法を説明する
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
ウェブデザインには目的、アイデア、思考、そして粘り強さがなければならない
<br />はじめに：このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...
WeChatアプレットはユーザーログインモジュールサーバーの構築を実装します
サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...
シェルスクリプトを使用して CentOS7 に python3.8 環境をインストールする (推奨)
ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...
Mysql で自動増分主キー ID を更新するときに問題が発生しました
目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...
Linuxテキスト処理ツールの詳細な説明
1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...
MySQLのCOUNT(*)のパフォーマンスについてお話しましょう
序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...
Dockerはターミナルで中国語を入力できない問題を解決します
序文：ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...
CSSスプライトの応用の詳細な説明
CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...
mysql5.7 ユーザー権限の作成、ユーザーの削除、権限の取り消し
1. ユーザーを作成します。注文： 'password' によって識別される ...