画像を読み込むための 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は記事の折りたたみと展開の機能を実装します
推薦する
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仮想マシンの時刻を変更する方法
上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...