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