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;
});
概要
この記事の内容が、あなたの勉強や仕事の参考になれば幸いです。また、スクリプトハウスをよろしくお願いします。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTMLベースの10秒淘宝網のページを作るために
-
キャンバスを使った雪の結晶の効果を実現するコード例
-
AmazeUIのJSフォーム検証フレームワークの動作を公開
-
HTML5 の数値入力コードで整数値のみを受け付けるようにする
-
html5 自動再生 mov形式動画サンプルコード
-
HTML5でWeb Notificationのデスクトップ通知を実装する方法
-
Canvasユーティリティライブラリ Fabric.jsマニュアル
-
モバイルウェブの画像プリロード方式について簡単に紹介します。
-
モバイル開発 HTML5 ボタンをクリックすると、ページがちらついたり、背景が黒くなったりする問題
-
webViewでhtml画像を読み込む際の問題を解決する。