画像を読み込むための 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は記事の折りたたみと展開の機能を実装します
推薦する
.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 で更新可能なビューを作成する方法について説明します。ご参考ま...