一つの目的 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 コマンドの詳細な説明
序文昨日、小さなプロジェクトを書いていたときに、txt ドキュメントのデータを mysql データベ...
主に低バージョンのブラウザ向け<!-- --> は HTML コメント タグです。上位バ...
Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...
エラーのスクリーンショット例外が発生した場所が見つかりません。解決策: リソースディレクトリにlog...
現在の環境は次のとおりです。セントロス7.5 docker-ce 18.06.1-ce 1. まずc...
Explain コマンドは、データベースのパフォーマンス問題を解決するために最初に推奨されるコマンド...
<br />はじめに:このアイデアは、数日前に上級ウェブデザインの次の記事を考えていると...
サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...
ワンクリック実行仮想マシンに Python 3.8 をインストールするには、ネットワーク アダプター...
目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...
1. /etc/passwdファイル内のデフォルトシェルが/sbin/nologinではないユーザー...
序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...
序文:ある日、DockerでMySQLサービスを構築したところ、MySQLのコマンドラインで中国語の...
CSS Sprite は、CSS スプライトとも呼ばれ、画像結合技術です。この方法は、複数の小さなア...
1. ユーザーを作成します。注文: 'password' によって識別される ...