画像を読み込むための 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: jQueryは記事の折りたたみと展開の機能を実装します
推薦する
VueはPCカメラを呼び出して写真機能を実現します
この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...
Linux コマンドラインからファイルを削除する実用的な方法
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信
関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...
MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明
1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...
CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法
この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...
Dockerコンテナを作成、起動、停止する方法
1. コンテナとは、独立して実行されるアプリケーション、またはアプリケーションのグループとその動作環...
Angularプロジェクトにおける共有モジュールの実装の詳細な説明
目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...
jsのイベントループ機構の解析
序文ご存知のとおり、JavaScript は本質的にシングルスレッドですが、ブラウザは非同期リクエス...
Vue は携帯電話の認証コードによるログインを実装します
この記事では、携帯電話認証コードログインを実装するためのVueの具体的なコードを参考までに共有します...
仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)
VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...
MySQL データ挿入効率の比較
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...
プロフェッショナルおよび非プロフェッショナルのウェブデザイン
まず、Web ページのスタイルの形成は、主に Web ページのレイアウト設計、ページの色処理、画像と...
nginx をコンパイルしてインストールした後、スムーズに nginx をアップグレードする方法
nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...
eject を使用せずに create-react-app の設定を変更する方法
1. イジェクトが推奨されないのはなぜですか? 1. eject を実行した後、どのような変化があり...
Mysql 複数データベースのバックアップ コード例
この記事は主にMysqlの複数データベースのバックアップのコード例を紹介します。この記事ではサンプル...