解決 関数 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 を応援してください。 以下もご興味があるかもしれません:
|
<<: Windows システムに MySQL を素早くインストールして展開する方法 (グリーンの無料インストール バージョン)
>>: 負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...
mysql コマンドを入力します: mysql -u+(ユーザー名) -p+(パスワード) mysq...
1. <select style="width:195px" name=&...
この記事では、簡単なドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
本日、ゲームを再起動した後、バックアップしたデータをターゲットデータベースにインポートできないことが...
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...
ウェブサイトのナビゲーションを設計することは、家の基礎を築くようなものです。基礎がしっかりしていなけ...
この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...
環境変数の設定の簡単な説明プログラムは、環境によって異なる環境変数を必要とします。たとえば、実稼働環...
異なるブラウザ間でページの表示を一致させるためには、フロントエンド開発において CSS スタイルのク...
MySQL データベースを使用すると、他のユーザーが定義したストアド プロシージャを他のユーザーが変...
この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...
1.MySQL UPDATE JOIN構文MySQL では、UPDATE ステートメントでJOIN句...