海报

src/components/sharePoster/index.js

@@ -47,11 +47,11 @@ class SharePoster extends Component {
         let $height = 800;
         let avatarWidth = 50    // imgList[index].poster_width    // 头像宽度
         let avatarHeight = 50   // imgList[index].poster_height     // 头像高度
-        let avatarPositionX = (imgList[index].header_position_x * $width)  // 头像x轴位置
-        let avatarPositionY = (imgList[index].header_position_y * $height)   // 头像Y轴位置
+        let avatarPositionX = (imgList[index].header_position_x * $width) // 头像x轴位置
+        let avatarPositionY = (imgList[index].header_position_y * $height)- 18   // 头像Y轴位置
 
         let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置
-        let qrCodePositionY = imgList[index].qr_code_y * $height  // 二维码y轴位置
+        let qrCodePositionY = imgList[index].qr_code_y * $height + 7  // 二维码y轴位置
         let qrCodeWidth = (imgList[index].qr_code_width * $width)      // 二维码宽度
         let qrCodeHeight = (imgList[index].qr_code_height * $height) - avatarHeight / 2     // 二维码高度
 
@@ -82,7 +82,7 @@ class SharePoster extends Component {
                 bgImage.setAttribute('crossOrigin', 'anonymous');
                 bgImage.onload = function () {
                     context.drawImage(bgImage, 0, 0, 450, 800);
-                    context.drawImage(qrCodeImg, 320, 685, 100, 100);
+                    context.drawImage(qrCodeImg, qrCodePositionX, qrCodePositionY, 100, 100);
                     context.fillStyle = imgList[index].username_color;
                     context.font = "16px serif";
                     context.fillText('@' + _this.state.name, (avatarPositionX + avatarWidth) + 20, (avatarPositionY + avatarHeight / 2));
@@ -228,24 +228,24 @@ class SharePoster extends Component {
         const { distPrice={}, smallListImg=[], smallactive } = this.state;
         return (
             <div className='share-poster'>
-                <HeaderBar 
-                    title='生成专属海报' 
-                    arrow={true} 
+                <HeaderBar
+                    title='生成专属海报'
+                    arrow={true}
                     cart={false}
                 />
                 <div className="total-container">
                     <div className='placard-img-container' id='imgWrapper'>
                         <img src={this.state.billSrc.src} alt="" />
                     </div>
-                    <img 
-                        src={this.state.codeSrc} 
-                        alt="" 
-                        id='qrcode' 
+                    <img
+                        src={this.state.codeSrc}
+                        alt=""
+                        id='qrcode'
                         className='placard-code'
                     />
-                    <canvas 
-                        id='canvas' 
-                        width='450' 
+                    <canvas
+                        id='canvas'
+                        width='450'
                         height='800'
                         className={this.state.billSrc === '' ? '' : 'hide'}
                     />
@@ -272,8 +272,8 @@ class SharePoster extends Component {
                         {
                             smallListImg.length > 0 && smallListImg.map((item, index) => {
                                 return (
-                                    <li 
-                                        onClick={this.squareClick.bind(this, index)} 
+                                    <li
+                                        onClick={this.squareClick.bind(this, index)}
                                         key={index}
                                         className={smallactive === index ? 'active' : ''}
                                     >