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を使用した負荷分散の簡単な例

推薦する

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

JavaScriptカスタムオブジェクトメソッドの概要

目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...

Linux環境でよく使われるMySQLコマンドの紹介

mysql コマンドを入力します: mysql -u+(ユーザー名) -p+(パスワード) mysq...

シンプルなドラッグ効果を実現するJavaScript

この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

ゲーム着物メモ問題の簡単な分析

本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

ウェブデザイナーが知っておくべき効率的なナビゲーションデザインの3つの原則

ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

Nest.js 環境変数の設定とシリアル化の詳細な説明

環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...

CSS スタイルのリセットとクリア (異なるブラウザで同じ効果を表示するため)

異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...

MySQL ストアド プロシージャ関連の権限変更の問題

MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

MySQL ジョイントテーブル更新デー​​タの詳細な例

1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...