この記事では、画像を読み込むための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は記事の折りたたみと展開の機能を実装します
一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...
1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...
このシステムでは、# 記号は root ユーザーを表し、$ 記号は通常のユーザーを表します。では、ど...
目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
select 要素は、単一選択または複数選択のメニューを作成します。フォームが送信されると、ブラウザ...
MySQL では、ほとんどのインデックス (PRIMARY KEY、UNIQUE、INDEX、FUL...
主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) ...
Flexbox レイアウト モジュールは、コンテナー内のスペースをより効率的に配分する方法を提供する...
ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...
序文これは古くからの要望ですが、オンラインで解決策を探している人はまだ多く、特に検索結果の上位にラン...
一般的に、リストには選択機能があり、単一選択、二重選択、複数選択が非常に一般的です。カスタム ループ...
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...
データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...
上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...