1. ホーム
  2. Web制作
  3. html5

QRコードポスター付きキャンバス生成の落とし穴記録

2022-01-29 01:26:22

キャンバスポスターは、背景画像、円形のアバター、ユーザーニックネーム、リンクされたQRコード画像から構成されています。

質問は以下の通りです。

画像が表示されない

  • 描画・レンダリング時に画像が表示されない:画像の読み込みが非同期なので、canvasの操作をonloadイベントに配置しないと画像が表示されない、画像が複数あるため、プロミスに配置してasyncで呼び出すことをお勧めします、await
  • キャンバスは、最終的に共有する画像を生成し、生成された画像が表示されません:画像のクロスドメインの問題のため、その上にimg attr、'crossOrigin'を'匿名'に設定しますが、あなたが誤ってAndroidの低バージョンで(私は華為Android 4.4.2で問題がある)ベース64にも、このパラメータを設定すると、注意は表示されなくなる。

画像のぼかし

Androidのモデルの冒頭で統一されたdprを行うには= 1処理、画像上のAndroidマシンの結果は非常に、丸みを帯びたアバターは、深刻なギザギザ、オンラインソリューションのどれも成功していないが、後で良いのwindow.devicePixelRatioにdprを設定しますが、画像の幅と高さが最高の固定値に、フレキシブル適応によれば設定されています。

コード例

// Avatar;
const imgAvadar = await promiseLoadImg(this.userInfoExternal.headUrl);
const imgSize = 40 * this.dpr;
const imgPos = 24 * this.dpr;

ctx.arc((this.canvas.width / 2), (imgPos + (imgSize / 2)), (imgSize / 2), 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(imgAvadar, ((this.canvas.width / 2) - (imgSize / 2)), imgPos, imgSize, imgSize);

new Promise(resolve => {
    const img = new Image();
    // base64 adds the following cross-domain configuration, which will not display the image in lower versions of Android
    if (src.indexOf('base64,') === -1) {
        img.setAttribute('crossOrigin', 'Anonymous');
    }
    img.onload = function () {
        resolve(img);
    };
    img.src = src;
});

概要

この記事の内容が、あなたの勉強や仕事の参考になれば幸いです。また、スクリプトハウスをよろしくお願いします。