feat:修改图片模糊的问题

src/modules/course-manage/modal/ShareLiveModal.jsx

@@ -74,7 +74,7 @@ class ShareLiveModal extends React.Component {
       () => {
       () => {
         this.setState({ time: new Date().valueOf() }, () => {
         this.setState({ time: new Date().valueOf() }, () => {
           setTimeout(() => {
           setTimeout(() => {
-            let node = document.getElementById('poster')
+            let node = document.getElementById('poster2')
             domtoimage.toPng(node).then((imgData) => {
             domtoimage.toPng(node).then((imgData) => {
               console.log(imgData)
               console.log(imgData)
               const download = document.createElement('a')
               const download = document.createElement('a')
@@ -156,6 +156,29 @@ class ShareLiveModal extends React.Component {
               <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
               <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
             </div>
             </div>
           </div>
           </div>
+          <div id='poster2'>
+            <div className='store-name'>
+              <span className='text'>{User.getStoreName()}</span>
+            </div>
+            <div className='course-name-title'>{type === 'videoClass' ? `${courseName}开课啦` : `邀请你观看直播：`}</div>
+            {type === 'liveClass' && <div class='live-couse-name'>{courseName}</div>}
+            <Choose>
+              <When condition={showImg}>
+                <img crossOrigin='*' src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
+              </When>
+              <Otherwise>
+                <img src={coverImgSrc + `?=${time}`} className='course-cover' alt='' />
+              </Otherwise>
+            </Choose>
+
+            <div className='qrcode-wrap'>
+              <div className='qrcode-wrap__left'>
+                <div className='text'>长按识别二维码进入观看</div>
+                <img className='finger' src='https://image.xiaomaiketang.com/xm/thpkWDwJsC.png' alt='' />
+              </div>
+              <div className='qrcode-wrap__right' id='qrcodeWrap'></div>
+            </div>
+          </div>
         </div>
         </div>
         <div className='right'>
         <div className='right'>
           <div className='share-poster right__item'>
           <div className='share-poster right__item'>

src/modules/course-manage/modal/ShareLiveModal.less

 .share-live-modal {
 .share-live-modal {
   .ant-modal-body {
   .ant-modal-body {
     display: flex;
     display: flex;
-    #poster{
-      background: #FFF;
-      margin:0;
-      padding: 20px;
-    }
     .left {
     .left {
       width: 303px;
       width: 303px;
       margin: 0 32px 0 16px;
       margin: 0 32px 0 16px;
       box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
       box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
       border-radius: 12px;
       border-radius: 12px;
-     
+      #poster{
+        background: #FFF;
+        margin:0;
+        padding: 20px;
         .course-name-title {
         .course-name-title {
         font-size: 14px;
         font-size: 14px;
         color: #333;
         color: #333;
@@ -83,6 +81,81 @@
           }
           }
         }
         }
       }
       }
+      #poster2{
+        background: #FFF;
+        margin:0;
+        padding: 20px;
+        .course-name-title {
+        font-size: 14px;
+        color: #333;
+        line-height: 20px;
+        margin-bottom: 4px;
+        }
+        .live-couse-name{
+        font-size:16px;
+        color:#333333;
+        font-weight: 600;
+        }
+        .course-name {
+          color: #333;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 20px;
+        }
+        .course-cover {
+          width: 526px;
+          height: 286px;
+          border-radius: 6px;
+          margin-top: 8px;
+        }
+
+        .qrcode-wrap {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
+          margin: 24px 0 16px 0;
+
+          &__left {
+            width: 98px;
+            text-align: center;
+            margin-right: 22px;
+            
+            .text {
+              line-height: 20px;
+            }
+
+            .finger {
+              width: 40px;
+              height: 40px;
+              margin-top: 8px;
+            }
+          }
+
+          &__right {
+            width: 110px;
+            height: 110px;
+            padding: 6px
+          }
+        }
+
+        .store-name {
+          // padding: 8px 16px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 8px;
+          .text {
+            font-size: 12px;
+            color: #999;
+            font-size: 14px;
+            line-height: 20px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            width: 100%;
+          }
+        }
+      }
+    }
     
     
     .right {
     .right {
       .title {
       .title {