画像を読み込むための 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は記事の折りたたみと展開の機能を実装します
推薦する
Nginx の場所に関する一般的なルールの優先順位の問題
目次1. 場所/マッチング2. 場所 = / 一致Locaitonには、完全一致（=）、プレフィック...
DockerでSpring Bootアプリケーションを実行する方法
ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...
SQLと各種NoSQLデータベースの使用シナリオの説明
SQL はメイントランクです。なぜ私はこのように理解するのでしょうか。技術的な観点からリレーショナル...
SQL ROW_NUMBER() および OVER() メソッドのケーススタディ
構文フォーマット: row_number() over(partition by grouping ...
MySQLクエリインターセプトの詳細な分析
目次1. クエリの最適化1. MySQLチューニングの概要2. 小さなテーブルが大きなテーブルを動か...
IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法
idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...
dockerfile-maven-plugin 使用ガイドの概要
目次pom 構成Setting.xml 構成ログインステータスログインが必要ですログインは必要ありま...
rem をモバイル デバイスに適応させる方法の例
序文モバイル端末のREM適応ソリューションのレビューと概要remの使い方rem 単位の計算は、HTM...
Nginx URL 書き換えメカニズムの原理と使用例
URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...
Django は Pillow を使用して検証コード機能を簡単に設定します (Python)
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
Linux の圧縮および解凍コマンドの紹介
目次一般的な圧縮形式: gz .bz2 .xz .zip一般的に使用されるアーカイブは圧縮を必要とす...
CSS3は赤い封筒を振る効果を実現します
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
Jenkins を通じて None のイメージを定期的にクリーンアップする方法
序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...
XHTML 特殊文字コレクション
注意 ノーブレークスペース = ノーブレークスペース、 iexcl ¡ &...
ulとliの基本的な使用法の分析
ナビゲーション、少量のデータテーブル、中央揃え<!DOCTYPE html PUBLIC &q...