jsはCanvasを使用して複数の画像を1つの実装コードにマージします

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決

関数 mergeImgs(リスト) {
 const imgDom = document.createElement('img')
 document.body.appendChild(画像Dom)

 const キャンバス = document.createElement('キャンバス')
 キャンバス幅 = 500
 キャンバスの高さ = 500 * リストの長さ
 定数コンテキスト = canvas.getContext('2d')

 リスト.map((項目, インデックス) => {
 const img = 新しい画像()
 img.src = アイテム
 // クロスドメイン img.crossOrigin = 'Anonymous'
 
 img.onload = () => {
  context.drawImage(画像, 0, 500 * インデックス, 500, 500)
  const base64 = canvas.toDataURL('image/png')
  imgDom.setAttribute('src', base64)
  // コンソール.log(ベースリスト)
 }
 })
}

定数urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
画像をマージします(urlList)

コードを少し最適化し、パブリックメソッドに変更します

/**
 * 複数の画像を結合して新しい画像を返します * @param {Array} list 画像の URL 配列 * @param {Number} cwith キャンバスの幅はデフォルトで 500 です
 * @param {Number} cheight キャンバスのデフォルトの高さは500です
 */
関数 mergeImgs(リスト、cwith = 500、cheight = 500) {
 新しい Promise を返します ((resolve, reject) => {
 定数ベースリスト = []

 const キャンバス = document.createElement('キャンバス')
 キャンバス幅 = cwith
 キャンバスの高さ = 高さ * リストの長さ
 定数コンテキスト = canvas.getContext('2d')

 リスト.map((項目, インデックス) => {
  const img = 新しい画像()
  img.src = アイテム
  // クロスドメイン img.crossOrigin = 'Anonymous'

  img.onload = () => {
  context.drawImage(画像、0、高さ * インデックス、高さ、高さ)
  const base64 = canvas.toDataURL('image/png')
  baseList.push(base64)

  (baseList[リストの長さ - 1])の場合{
   コンソール.log(ベースリスト)
   // 新しい画像を返すresolve(baseList[list.length - 1])
  }
  }
 })
 })
}

定数urlList = ['./img/timg%20(1).jpg', './img/timg.jpg']
mergeImgs(urlList).then(base64 => {
	const imgDom = document.createElement('img')
	imgDom.src = base64
	document.body.appendChild(画像Dom)
})

効果

ここに画像の説明を挿入

これで、Canvas を使用して複数の画像を 1 つに結合する js の実装コードに関するこの記事は終了です。より関連性の高い js キャンバス画像結合コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • js+ca​​nvasは2枚の画像を1枚の画像に結合する方法を実現します
  • jsはキャンバスによって生成された画像を保存するか、直接画像を保存します
  • js は、画像を png 形式で保存し、ローカルにダウンロードするためのキャンバス メソッドを実装します。
  • JSモバイル/H5は複数の画像を選択して同時にアップロードし、キャンバスを使用して画像を圧縮します
  • js+html5を使用してキャンバスに絵を描く方法

<<:  Windows システムに MySQL を素早くインストールして展開する方法 (グリーンの無料インストール バージョン)

>>:  負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例

推薦する

MySQLでバッチを更新するいくつかの方法

通常、フィールド値を更新するには次の SQL ステートメントを使用します。 mytable を更新し...

Linux md5sumコマンドの使い方

01. コマンドの概要md5sum - MD5検証コードを計算して検証するmd5sum コマンドは、...

ウェブデザインの詳細分析に関する詳細な議論

設計業務では、設計者がレビューに参加したり、リーダーの一部が設計案の詳細が足りないと言っているのをよ...

MySQL 5.7.19 インストールディレクトリに my.ini ファイルを作成する方法

前回の記事では、MySQL 5.7.19 無償インストール版 (64 ビット) の設定方法についての...

docker デプロイメントの実装手順 lnmp-wordpress

目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

デザイン理論: コンテンツプレゼンテーションのための 10 のヒント

<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

MySQL CHARとVARCHARの保存と読み取りの違い

導入保存時と読み取り時に CHAR 型と VARCHAR 型の違いを本当にご存知ですか?まずいくつか...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

node.jsのインストールとHbuilderXの設定の詳細な説明

npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...

MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...