まず、次のようなキャンバス描画の基本的な方法について説明します。
const myCanvas = document.createElement('canvas'); myCanvas.width = 400; const ctx = myCanvas.getContext('2d'); 1.jpg;//画像がロードされるときのdrawImage内、そうでない場合、画像はまだロードされていない可能性があります img.onload=()=>{ ctx.drawImage(img, 0, 0, 100, 50);}文法：drawImage(画像, x, y)
キャンバス上の指定した座標点を起点として、画像の元のサイズに合わせて画像全体を描画します。
drawImage(画像, x, y, 幅, 高さ)
キャンバス上の指定した座標点から開始して、指定したサイズ (幅と高さ) で画像全体を描画すると、画像は自動的に拡大縮小されます。
drawImage(image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)
指定した画像の部分画像（(imageX,imageY)を左上隅、幅をimageWidth、高さをimageHeightとした長方形の部分）を、(x,y)を左上隅の座標としてキャンバスに描画し、の長方形領域の幅は幅として、高さは高さとして指定します。
このマルチ画像ステッチのビジネス シナリオは、背景画像、外部リンク画像、Web サイトのロゴ、カスタマイズされた QR コード画像など、さまざまなコンテンツを含むカスタマイズされた共有画像を作成することです。キャンバスを画像出力に変換するときに生成されます。主なポイントは次の 3 つです。
1. 画像のクロスドメインの問題。
2. 複数の絵を描くとキャンバスが汚染されます。
3. 画像のサイズ。
まず、画像のクロスドメインの問題があります。この問題に関する解決策は次のとおりです。
img.setAttribute('crossOrigin', 'anonymous');クロスドメインの問題を解決した後、複数画像のステッチングとエクスポートの後に新しいエラー メッセージが表示されました。
キャッチされない DOMException: 'HTMLCanvasElement' で 'toDataURL' の実行に失敗しました: 汚染されたキャンバスはエクスポートできない可能性があります。
この問題を発見したとき、インターネット上の情報を確認したところ、ほとんどの問題は上記のクロスドメインの方法で解決できましたが、私のビジネス シナリオでは明らかに機能しませんでした。
コードのトラブルシューティングを通じて、外部リンク画像がクロスドメインで処理される場合、背景画像 + QR コード画像を使用するとこのエラーが報告されないことがわかりました。単独で使用した場合はエラーが報告されません。ロゴ画像はすべてローカル ファイルであり、明らかにクロスドメインの問題ではありません。
QR コード画像と背景画像にエラーがないのは、QR コード画像ソースが Base64 形式であるためです。
そこで、キャンバスを使用してロゴ画像をbase64形式にエクスポートし、背景画像+QRコード画像と組み合わせてみましたが、エクスポート時にエラーは報告されませんでした。
複数の画像を一緒にエクスポートするときの汚染されたキャンバスの問題は、画像要素を Base64 形式にすることですべて回避できます。
ビジネス シナリオには外部リンク画像があり、すべての外部リンクがクロスドメイン処理を可能にするために Web サイトのドメイン名を処理しているわけではないため、外部リンク画像の Base64 データを生成するときに、img.onerror イベントを使用します。処理が行われ、デフォルトの図に置き換えられます。
全体の絵を描く前に複数の絵を別々に処理するため、Promise処理を使用した方が良いかもしれません。
画像エクスポートのサイズについては、次を使用してみてください。
myCanvas.toDataURL('image/jpeg', encoderOptions)encoderOptions: 画質を 0 ～ 1 から選択できます。値の範囲を超える場合は、デフォルト値の 0.92 が使用されます。他のパラメータは無視されます。
上記は、キャンバス内の複数の画像をつなぎ合わせてエクスポートした経験を個人的にまとめたものです。 これが皆さんの学習に役立つことを願っています。また、皆さんが VeVb Wulin Network をサポートしてくれることを願っています。