序文
名前が示すように、html2canvasはhtml要素をCanvasキャンバスに変換し、Canvasを画像にエクスポートします。この記事ではタイトルにある機能を紹介します。
1. 物件紹介
1.scrollX :数値を入力します。デフォルト値は不明です。div要素が大きすぎて画面幅を超えてしまい、生成されたCanvasが不完全に表示されてしまう問題を解決しました。
2.scrollY :数値を入力します。デフォルト値は不明です。div要素が大きすぎて画面の高さを超えてしまい、生成されたCanvasが不完全に表示されてしまう問題を解決しました。
3. dpi:数値を入力します。デフォルト値は明確ではありません。ピクセル数です。画像のピクセル サイズまたは明瞭度を決定します。
4.backgroundColor : stringと入力し、デフォルトは#fff で、キャンバスの背景色を生成します。透明な効果が必要な場合は、値をnullに直接割り当てます。WeChat で開くと、透明な背景に黒い境界線が表示される場合があります。次のコードは、黒い境界線の問題に対処する方法について説明します。
5.allowTaint :タイプはboolean、デフォルトはfalse, クロスドメインを許可するかどうかを設定します。フロントエンドがtrueに設定されている場合でも、ドメインを越えることはできず、ドメインを越えるためにはバックエンドでヘッダーを設定する必要があることに注意してください(バックエンドには Access-Control-Allow-Credentials属性が含まれる必要があります)応答のヘッダーに追加します。同時に、フロントエンドのImage も、 crossOrigin属性をAnonymousに設定する必要があります)。6.高さ:タイプ数値、デフォルトはnull 、生成されたキャンバスの高さ。通常、この属性は使用されません。キャンバスが比較的大きく表示範囲を超える場合があり、この属性は大きな制限をもたらすためです。7. width:タイプはnumber、デフォルトはnull 、生成されたキャンバスの幅です。通常、この属性はheightと同様に使用されません。8.letterRendering :タイプ
boolean、デフォルトではfalse、単語の間隔が設定されている場合に便利です。
9.ロギング:タイプはboolean、デフォルトはfalse、デバッグ情報を出力します。
10.プロキシ:タイプstring、デフォルトは未定義、プロキシ アドレス。クロスドメインの問題を解決できますが、解決できるドメイン名は 1 つだけであり、クロスドメインに複数のドメイン名がある場合は適用できません。
11. taintTest:タイプboolean、デフォルトtrue、レンダリング前にイメージをチェックするかどうか。
12.タイムアウト:タイプ番号、デフォルト0、画像読み込み遅延時間。
13. useCORS:タイプboolean、デフォルトfalse、クロスドメインの問題を解決するために、通常はtrueとして割り当てられます(第 5 条と組み合わせることができます)。
2 つの h5 タグ要素
ヒント:以下のコードからわかるように、コンテナーには多くのコンテンツが含まれています。次に、これらのコンテンツをCanvasに変換します。
注:タグ内で多くのリモート リソースを使用する場合は、クロスドメインの問題をできる限り回避するようにしてください。もちろん、バックエンドと連携してこの問題を解決することもできます。
<div id="contianer">
<img src="./top.png" />
<div>
<img src="./title.png" />
<span>卧龙先生</span>
<div>
<img src="./qrcode.png" />
</div>
</div>
</div>
3. キャンバスを生成し、画像をダウンロードしてコピーします
ヒント:キャンバスを生成して画像をエクスポートするときは、圧縮プロセスが行われ、時間がかかるため、デバッグ パネルを開いてログ ファイルを確認してください。
1.キャンバスを生成します。2 回目と 3 回目で次のcallbackBack関数が呼び出されます。
callBack() {
const targetDom = document.getElementById('contianer');
html2canvas(targetDom, {
useCORS: true,
allowTaint: true,
scrollX: 0,
scrollY: 0,
backgroundColor: null,
dpi: window.devicePixelRatio * 2,
}).then(canvas => {
// 注释1
console.log('>>>> 生成canvas成功 >>>>');
});
}
2. 画像をダウンロードします。たとえば、「画像のダウンロード」ボタンをクリックして記事 1 のコールバック関数を呼び出し、注 1の位置に次のコードを入力してローカルにダウンロードします。
const dom = document.createElement('a');
dom.href = canvas.toDataURL('image/png');
dom.download = '图片名称.png';
dom.click();
3. ワンクリックで写真をコピーします。たとえば、「ワンキーコピー」ボタンをクリックすると、データがクリップボードに書き込まれ、ターゲット領域に貼り付けられます。引き続き記事 1 のコールバック関数を呼び出し、注 1の位置に次のコードを入力してコピー アンド ペースト機能を実現します。
(注: ClipboardItemはシステム関数です。正しく呼び出す方法は独自の開発言語に応じて調整する必要があります)
canvas.toBlob(blob => navigator.clipboard.write(
[new window.ClipboardItem({
[blob.type]: blob})]
))
4. 黒枠問題への対処
1. 黒い枠が表示される一般的な状況:
(1) デバイス構成が異なります。たとえば、Macでは問題ありませんが、 Windowsでは黒いバーが表示されます。DingTalk では問題ありませんが、WeChat では黒いバーが表示されます。Chromeブラウザでは問題ありませんが、Sogou ブラウザでは黒いバーが表示されます。 黒枠。
(2) 適応の問題。場合によっては、生成されたキャンバスの幅と高さが数ピクセル多くなり、これらの余分なピクセルが黒い境界線になる場合があります。
2. 解決策：
理由は何であれ、黒枠は背景の透明度にほぼ関係しているので、簡単でわかりやすい処理方法を考えてみましょう。メインコンテンツに影響を与えることなく、透明部分をすべて白に設定できます。ダウンロードまたはコピーする前に、キャンバスの画像属性のデータをリセットできます。コメント 1 の位置には、次のコードがまだ書かれています。
let context = canvas.getContext('2d')
let image = context.getImageData(0, 0, canvas.width, canvas.height)
for(var i = 0; i < image.data.length; i += 4) {
// 当该像素是透明的，则设置成白色
if(image.data[i + 3] == 0) {
image.data[i] = 255
image.data[i + 1] = 255
image.data[i + 2] = 255
image.data[i + 3] = 255
}
}
context.putImageData(image, 0, 0);
// 之后，在此处继续写上第三部分的第2或第3条代码
あとがき
テクノロジーには終わりがなく、html2canvasについての私の理解は氷山の一角にすぎません。