画像を読み込むための 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は記事の折りたたみと展開の機能を実装します
推薦する
react setStateの詳細な説明
目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...
0.1秒の価値！フロントエンドのウェブページの高速化の問題について簡単に説明します
私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...
Dockerはイメージ名とTAG操作の名前を変更します
docker イメージを使用する場合、以下に示すように、REPOSITORY と TAG の両方が ...
インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明
この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...
js 属性オブジェクトの hasOwnProperty メソッドの使用
オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...
Apple 電卓の JS 実装
この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...
Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)
今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...
MySQL スロークエリログの設定と使用方法のチュートリアル
序文MySQL スロー クエリ ログは、日常業務でよく遭遇する機能です。MySQL スロー クエリ ...
JavaScript における変数と関数の昇格の詳細な例
js 実行字句解析フェーズ: 形式パラメータ解析、変数宣言解析、関数宣言解析の 3 つの部分が含まれ...
Centos 7 システムの Tomcat サーバーの詳細な分析
目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...
Docker Secretの管理と使用の詳細な説明
1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...
Dockerオーバーレイはホスト間のコンテナ相互通信を実現します
目次1. Dockerの設定2. レジストリとネットワークを作成する3. コンテナを起動する環境説明...
NodeJS は画像テキスト分割を実現します
この記事では、画像テキストセグメンテーションを実装するためのNodeJSの具体的なコードを参考までに...
Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...