ローカル フォルダー内の画像を読み込んで表示するための 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 コマンドの詳細な説明
推薦する
Docker View プロセス、メモリ、カップ消費量
Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...
Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図
1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...
CSS3 変換遷移ジッター問題の解決
transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...
CSSスプライトの応用の詳細な説明
CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...
CSS ファイルをインポートする 4 つの方法 (インライン、インライン、外部、インポート) の詳細な説明
CSS インポート方法 - インラインスタイルタグ属性を通じて、CSSのキーと値のペアがタグに直接書...
Dockerはホスト間のネットワーク通信を実現するためにMacvlanを導入する
基本的な概念: Macvlanの動作原理: Macvlan は、Linux カーネルでサポートされて...
nginx は画像表示の遅さとダウンロードの不完全さの問題を解決します
前面に書かれた最近、ある読者から、ブラウザからサーバーにアクセスすると、画像の表示が遅く、ブラウザに...
Linux でユーザーをグループに追加する 4 つの方法の概要
序文Linux グループは、Linux でユーザー アカウントを管理するために使用される組織単位です...
Vueはリストのシームレスなスクロールを実装します
この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...
MySQL に接続されている IP アドレスを表示する方法の例
具体的な方法：まずコマンドプロンプトを開きます。次に、[ mysql -u root -p ] コマ...
MySql 5.7.21 無料インストール バージョンの構成方法 (Win10 の場合)
1.インストールしたい場所に解凍し、my.iniファイルを作成します。 my.iniの内容は次のと...
フロントエンドの vue+express ファイルのアップロードとダウンロードの例
新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...
Dockerコンテナに入る方法と出る方法
1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...
background-positionプロパティでのパーセンテージ値の使用法の検討
背景位置が背景画像の表示に与える影響この2日間のプロジェクトでホームページの写真を入れ替えていたとこ...
選択タグ内のオプションをクリアする3つの方法
方法1コードをコピーコードは次のとおりです。 document.getElementById(&qu...