ラララ、最初に要件について話しましょう。この製品では、ユーザーがアプリ内で WeChat、QQ、その他のプラットフォームに写真を共有する必要があります。画像にはユーザーの名前、アバター、独自の情報が記載された QR コードが含まれています。では、このポスターをどのように生成するか~~~
まず、上司が html2canvas というプラグインの機能は DOM ノードを画像に変換するものであると教えてくれました。試してみたら動きましたが、このプラグインはちょっと大きすぎて、投稿者のニーズに応えるためにこんな大きなものを導入するのは損な気がします！ ！ ！だったら自分で描いたほうがいいよ～
まず、レンダリング
ダンダンダンダン~~~最終的に生成されたポスターには、アバター、名前、QR コードが含まれています。もちろん、画像の QR コードは Baidu の QR コードです~ 最後に、主要なプラットフォームで共有するために、base64 が生成されます。
早速、コードを示します (私は怠け者なので、このコードはコンパイルしていません...)
<canvas id=myCanvas width=750 height=1200 style=border:1px Solid #d3d3d3;background:#ffffff;></canvas>
DOM ノードは非常にシンプルです。キャンバス タグを生成し、必要に応じていくつかの属性を記述するだけです~
var Canvas = document.getElementById(myCanvas); //キャンバス ノード関数を取得します imageToCanvas(canvas,url1,url2,code) { //キャンバス ノードの背景画像 url1 アバター url2 QR コード コードを渡します var ctx = Canvas.getContext(2d ) ; var img1 = new Image(); img1.src = url1; //前のものは説明しません、画像を生成します img1.onload = function(){ ctx.drawImage(img1,0,0); //画像が読み込まれると、0 0 からキャンバスに割り当てられます。 var img2 = new Image(); img2.src = url2; img2.onload = function(){ ctx.arc(374, 134, 44, 0, 2 * Math) . PI); // 切り取り操作では、正方形のアバターを円に切り取ります。 // キャンバスから円を切り出します。 ctx.clip(); //Crop ctx.drawImage(img2, 330, 90, 88, 88); //img2 をサイズ 88 の 330 90 座標に配置します ctx.restore() //キャンバスの状態を解放します ctx.font=28px Arial; textAlign=center; ctx.fillStyle = '#FFFFFF'; //前のステップは、テキスト属性を中央に設定することです ctx.fillText(あなたの名前はShenma, 375,220) //実際には、ここでのテキストはハードコーディングされていますが、さらにパラメータを渡しても問題ありません。 var img3 = new Image(); ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); = ConvertCanvasToImage(canvas); //画像をbase64に変換します console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; //初期化関数 ConvertCanvasToImage(canvas) { var image = new Image(); image.src = Canvas.toDataURL(image/png); //キャンバスを img に変換して戻り画像;}このようにして、base64 を取得して使用できます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。