html5キャンバスWeChatポスター共有の詳細説明（個人登山ピット）

この記事では、キャンバス WeChat ポスター共有を紹介し、全員と共有します。詳細は次のとおりです。

1. ランダムに画像を生成する
2. WeChat ユーザーのアバターと名前を取得します (取得するにはバックエンド インターフェイスを調整します)。
3. ユーザーのアバターとタイトルをランダムに生成された写真と組み合わせてポスターを作成します
4. おそらく、前のページのユーザーは、画像にも記入する必要がある願いのテキストも記入しました。

1. WeChatブラウザでCanvasを長押しすると無効になり、imgのように共有できません（その場合はimgに変換します）
2. 画像に変換すると、WeChat 開発者ツールでは表示できますが、実機では動作しません (泣きたいけど涙は出ません) 画像はクロスドメインである可能性があると Du Niang 氏は言いました。
3. ユーザー アバターの合成にも角を丸くする必要があるので、私は Du Niang に愛着がないので、キャンバス API のドキュメントを見ただけです。
4. キャンバス内のテキストが指定された幅を超える場合、テキストを折り返す必要があります。私は、指定された幅を超えないさまざまなテキスト配置方法しか知りません。
5. 高解像度の画面でキャンバスがぼやけるという問題 (非常に単純ですが、Du Niang がなぜそんなに冗長なのかわかりません) は、canvas.witdt=innerWidth*devicePixelRatio ではありません。

<div class=imgBox v-cloak> <img :src='imgSrc' v-if=imgSrc /></div>

CSS

 <スタイル> *{ マージン: 0; } ボディ、html { 幅: 100%; 高さ: 100%; }表示: ブロック; }</style>

スクリプト

// js のメイン構造 new Vue({ el:'imgBox', data:{ urlParam: {},//URL 内の値オブジェクトを取得しますrandomNum: 1,//どの祝福ページを決定するために乱数が使用されます userName: '' ,//ユーザー名 imgSrc: '',//合成された最終画像 userImg: '',//ユーザーのアバター画像 userMessage: '',//ユーザーメッセージ}, メソッド: { //友達に共有する wxShareFriends: function () {}, // 初期化リクエストヘッダー wxHttp: function () { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name=csrf-token ]' ).attr('content') } }) }, // 乱数を取得 [1,10]randomNumbers() { this.randomNum = Math.ceil(Math.random() * 10) }, // WeChat ユーザーのアバターとタイトル、ユーザーの祝福の言葉を取得します getUserInfo() { var vm = this('API リクエスト アドレス'; 、関数 (データ) { if (data.code == 1) { vm.userImg = data.data.headimg; vm.userName = data.data.nickname; (vm.randomNum % 2 == 0) { vm.userMessage= '定命の世界で出会うとき、私たちは年をとっています。定命の世界で出会うことは、微妙で神聖なことです。' } else { vm.userMessage = '死すべき世界で会おう、私たちは年老いた' } } vm.$nextTick(function () { vm.drawCanvasBgImg(); }) }) }, // ページの dpr と幅を取得します getWindowInfo() { var windowInfo = {}; windowInfo.dpr = window.devicePixelRatio; if (window.innerWidth) { windowInfo.width = window.innerWidth } else { windowInfo. width = document.body.clientWidth } return windowInfo; //アクティビティ ページで共有するための大きな背景画像を描画します。drawCanvasBgImg () {}, // 背景画像のキャンバス上で円を切り取り、ユーザーのアバターで塗りつぶします。drawCanvasUserImg(canvas, ctx, dpr) {}, // 塗りつぶしユーザー名またはユーザー メッセージ内 CanvasFillText (canvas, ctx, dpr, CircleR) {}, // Base64 ビット共有イメージを合成する ConvertCanvasToImage (canvas) { this.imgSrc = Canvas.toDataURL(image/jpeg);//png は有害であり、QR コードは Android では認識されず、リダイレクトできません。 this.$Spin.hide() } }})

1. drawCanvasBgImg()
2. drawCanvasUserImg (キャンバス、ctx、dpr)
3. CanvasFillText (canvas、ctx、dpr、circleR)
4. ConvertCanvasToImage(キャンバス)

 // データを取得した後、背景画像の描画を開始します。考え方は非常に簡単です。画像をキャンバスに描画し、次にそれを imgdrawCanvasBgImg () に変換します。 = document.createElement( Canvas); var ctx = Canvas.getContext(2d); var clientWidth = this.getWindowInfo().width;// キャンバス幅適応モバイル画面 var の画面幅を取得します。 dpr = this.getWindowInfo().dpr; ctx.globalCompositeOperation = source-atop;//** エイリアスは役に立たないようですが、間違った場所で使用されているかどうかはわかりません** Canvas.width = dpr * clientWidth; //携帯電話の画面のため、Retina 画面を使用する場合は、画像がぼやけるのを避けるために、dpr を使用してキャンバスの幅と高さを動的に設定します。 375;//WeChat ヘッダーのステータス バーの削除は 603 である必要があります。603 ではまだ画面を画像で埋めることができないことが理解できないので、609 に追加しました。 var img = new Image(); crossOrigin = '';//デッドピット画像がドメインを越えています (img.crossOrigin = Anonymous はまだ Base64 形式の画像を表示できません) img.src = http://xxx + this.randomNum + .jpg; img.onload = function () { ctx.drawImage(img, 0, 0, Canvas.width, Canvas.height); vm.drawCanvasUserImg(canvas, ctx, dpr);

 //背景画像のキャンバス上で円を切り取り、ユーザーのアバターを塗りつぶします。drawCanvasUserImg: function (canvas, ctx, dpr) { var vm = this; varcircleR = 50 * dpr; //半径 varcircleX = Canvas. width / 2 ;//円の中心のX座標 var CircleY = 50 * dpr;//円の中心のY座標 var imgX = CircleX - CircleR;//ピクチャXの開始座標 var imgY =circleY -circleR;//画像の開始座標 Y var imgWidth = 2 *circleR;//画像のサイズは円に従って決まります var img = new Image() = img.src; = this.userImg; img .onload = function () { ctx.save(); // ctx の現在の状態を保存します ctx.arc(circleX,circleY,circleR, 0, 2 * Math.PI); //円を描画します ctx.clip(); //上の円を切り取ります ctx.drawImage(img, imgX, imgY, imgWidth, imgWidth); // 切り取った円上に描画します ctx.restore () ; //状態を復元 vm.canvasFillText(canvas, ctx, dpr, CircleR);

// ユーザー名またはユーザーメッセージを入力します CanvasFillText (canvas, ctx, dpr, CircleR) { var fontSizeThis = dpr * 20 + 'px' + ' Arial' // ユーザー名 Y 軸座標 var; userMessageX = dpr * 40; //ユーザーメッセージの X 軸座標 var userMessageY = 0; // ユーザーメッセージの Y 軸座標 var lastSubStrIndex = 0;//String subscript var lineWidth = 0;//1行幅 var allTextWidth = 0;//全文字幅 ctx.font = fontSizeThis; //ユーザー名を記述するにはユーザー名が必要です if (this.userName) { ユーザー名 Y = サークル R * 2.5; ctx.fillStyle = #0094ff; ctx.textAlign = 'center'; Canvas.width / 2, userNameY); } if (this.userMessage) { userMessageY = userNameY + dpr * 35; // (var i = 0; i < this.userMessage) の文字幅を取得します。 . length; i++) { allTextWidth += ctx.measureText(this.userMessage[i]) } //文字列の長さがキャンバス領域より長い場合は、行を折り返す if (allTextWidth > Canvas.width - 2* userMessageX) { for (var i = 0; i < this.userMessage.length; i++) { lineWidth += ctx。 meterText(this.userMessage[ i]).width; if (lineWidth > Canvas.width - 2*userMessageX) { ctx.textAlign = 'left'; ctx.fillText(this.userMessage.substring(lastSubStrIndex, i), userMessageX, userMessageY); userMessageY += dpr * 25;//行の高さを設定 lineWidth = 0; } if (i == this.userMessage.長さ - 1) { ctx.fillText(this.userMessage.substring(lastSubStrIndex, i + 1),ユーザーメッセージ },

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。