领取页

src/components/activity/give-courses/share-content/poster/poster.js

@@ -60,12 +60,28 @@ class Poster extends Component {
     canvas.width = canvasWidth
     canvas.height = canvasWidth * bg.height / bg.width
 
-    console.log(canvas.width)
-    // ctx.scale(scale, scale)
-    ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
-    // ctx.drawImage(bg, 0, 0, Math.round(+canvas.style.width.slice(0, -2)), Math.round(+canvas.style.height.slice(0, -2)))
+    console.log(scale)
+    ctx.fillStyle = '#fff'
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+    ctx.fillStyle = '#000'
+    ctx.strokeRect(190, 400, 100, 100)
+    ctx.scale(scale, scale)
+    ctx.strokeRect(190, 400, 100, 100)
+    document.body.appendChild(canvas)
+    this.setState({
+      poster: canvas.toDataURL()
+    }, () => {
+      const {savePoster} = this.props
+      savePoster && savePoster(this.state.poster)
+    })
+
+    return
+
 
+    // ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
+    ctx.drawImage(bg, 0, 0, Math.round(+canvas.style.width.slice(0, -2)), Math.round(+canvas.style.height.slice(0, -2)))
 
+    scale = 1
     let r = 16 * scale
     const avatarImage = await this.getImage(avatar)
     const ax = 20 * scale
@@ -83,7 +99,8 @@ class Poster extends Component {
     ctx.fillText(username, 2 * r + ax + (7 * scale), 22 * scale)
 
     let qrcode = await this.getQRCodeCanvas(redirectUrl, scale, posterWidth)
-    ctx.drawImage(qrcode, 192 * scale, 405 * scale, posterWidth * (100 / (window.innerWidth * 0.72)), posterWidth * (100 / (window.innerWidth * 0.72)))
+    // ctx.drawImage(qrcode, 192 * scale, 405 * scale, posterWidth * (100 / (window.innerWidth * 0.72)), posterWidth * (100 / (window.innerWidth * 0.72)))
+    ctx.drawImage(qrcode, 190 * scale, 400 * scale, 70, 70)
     // 540 384 810
     // 894 636 1342
     // ctx.drawImage(qrcode, 220, 450, 60, 60)
@@ -115,11 +132,14 @@ class Poster extends Component {
     let codeWidth = 100 * scale, codeHeight = 100 * scale,
       codeSize = posterWidth * (100 / (window.innerWidth * 0.72))
 
+
     canvas.style.width = `${codeSize}px`
     canvas.style.height = `${codeSize}px`
     canvas.width = codeWidth
     canvas.height = codeHeight
 
+    document.body.appendChild(canvas)
+
     return QRCode.toCanvas(canvas, text)
   }
 

src/components/activity/give-courses/share-content/poster/poster.scss

@@ -7,7 +7,6 @@
     -webkit-overflow-scrolling: touch;
     -webkit-touch-callout: none;
 
-
     .placard-desc {
         width: 100%;
         color: #fff;

src/components/activity/give-courses/share-content/share-content.scss

@@ -6,6 +6,7 @@
     padding: 30px 0 40px 0;
     position: relative;
     text-align: center;
+    font-family: Microsoft YaHei,Helvetica Neue,STHeiti,Helvetica,Arial,sans-serif;
 
     .tab {
         display: flex;