画像を読み込むための JavaScript キャンバス

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード:

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>画像の使用</title>
        <スタイル タイプ="text/css">
            * {
                /* マージン: 0;
                パディング: 0; */
                ボックスのサイズ: 境界線ボックス;
            }
            キャンバス {
                境界線の幅: 1px;
                境界線の色: #000000;
                境界線のスタイル: solid;
            }
        </スタイル>
    </head>
    <本文>
        <キャンバスid="キャンバス"></キャンバス>
        
        <div>
            <input type="file" accept="image/*" />
        </div>
        
        <script type="text/javascript">
            window.onload = (イベント) => {
                主要()
            }
            
            関数main() {
                定数キャンバス = document.getElementById("キャンバス");
                const ctx = canvas.getContext("2d");
                
                定数 inputFile = document.querySelector("input[type=file]");
                inputFile.onchange = (イベント) => {
                    const ファイル = event.target.files;
                    ファイルの長さが 0 より大きい場合
                        const file = files[0]; // 最初のファイル
                        console.log(ファイル);
                        
                        定数image = 新しいImage();
                        image.src = URL.createObjectURL(ファイル);
                        image.onload = 関数(イベント) {
                            // console.log(イベント、これ);
                            URL.revokeObjectURL(this.src);
                            
                            キャンバスの幅 = 画像の幅;
                            キャンバスの高さ = 画像の高さ;
                            
                            ctx.drawImage(画像, 0, 0);
                        }
                    }
                }
            }
        </スクリプト>
    </本文>
</html>

参考: リンク

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js+HTML5 キャンバスでシンプルな読み込みバー (プログレスバー) 関数を実装する例
  • JS は、スクリーンショットを取得するためにビデオ オーディオ/ビデオのプリロードを実装します (キャンバス スクリーンショットを返します)
  • JS Canvas タイマーは動的な読み込みアニメーションをシミュレートします
  • ウェブページの読み込み進捗バーコードを実現するJavaScriptは超シンプルです
  • JavaScriptはWebページの読み込み進行状況を実装します
  • js プログレスバーの読み込み効果のシンプルな実装
  • ホームページの読み込み進行アニメーションを実現するネイティブ JS
  • pace.js ページ読み込み進捗バープラグイン
  • ページ読み込み進捗バーコードを実装する JavaScript
  • JavaScript キャンバスで水玉の読み込みアニメーションを実現

<<:  Linux の ufw ファイアウォールの紹介

>>:  jQueryは記事の折りたたみと展開の機能を実装します

推薦する

.htaccess を使用して特定の IP からの Web サイトへのアクセスを禁止する方法

序文コストを考慮して、ほとんどのウェブマスターは、多数の小規模なウェブサイト用にサーバーを個別に購入...

nginx + php の「入力ファイルが指定されていません」の解決策

本日、ローカル開発環境で突然「入力ファイルが指定されていません」というエラーが発生してしまいました。...

Linuxディレクトリ構造の詳細な紹介

Linuxを学び始めるときは、まずLinuxの標準ディレクトリ構造を理解する必要があります。 / r...

Linux運用保守ツールSupervisor(プロセス管理ツール)のインストールと使用

1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...

Linux IO 多重化 epoll ネットワーク プログラミング

序文この章では、基本的な Linux 関数と epoll 呼び出しを使用して、Linux 上で実行で...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

Webデザインチュートリアル(7):Webデザインの効率化

<br />前の記事:Webデザインチュートリアル(6):デザインへの情熱を持ち続けまし...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...

MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介

GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...

CSS を使用して 3 列レイアウトを実装するサンプル コード。中央の列は適応型で、テキスト サイズに応じて幅が変わります。

Baiduのインタビューで遭遇する質問は、次のレイアウト効果を達成する必要がある。 中央の紫色の列...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

SQL文におけるGROUP BYとHAVINGの使用に関する簡単な説明

GROUP BY 句と HAVING 句を紹介する前に、まず SQL 言語の特殊な関数である集計関数...

JavaScriptはシンプルな日付効果を実装します

JavaScriptの日付エフェクトの具体的なコードは参考用です。具体的な内容は次のとおりです。コー...

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

MySQLで更新可能なビューを作成する方法の詳細な説明

この記事では、例を使用して、MySQL で更新可能なビューを作成する方法について説明します。ご参考ま...