画像を読み込むための 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は記事の折りたたみと展開の機能を実装します

推薦する

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

Linuxで$を#に変更する方法

このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...

ワンクリックで雨や雪のエフェクトを実現する ThingJS パーティクルエフェクト

目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...

HTML 選択タグにおける単一選択と複数選択の詳細な説明

select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザ...

MySQL btree インデックスとハッシュ インデックスの違い

MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...

HTML テーブルタグについての簡単な説明

主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...

CSS3 の Flex レイアウトの詳細な分析

Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...

JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...

高度な CSS の 3 つの方法を使用して複数行の省略を実装するサンプル コード

序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...

Reactマウスの複数選択機能の設定方法

一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...

カルーセル効果を書くためのjs

この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

CentOS仮想マシンの時刻を変更する方法

上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...