海报

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

@@ -46,10 +46,9 @@ class Poster extends Component {
 
   generatePoster = async () => {
     let canvas = document.createElement('canvas'),
-      scale = window.devicePixelRatio || 1,
       ctx = canvas.getContext('2d'),
-      posterWidth = window.innerWidth * 0.72,
-      canvasWidth = posterWidth * scale
+      posterWidth = 270,
+      canvasWidth = 540
 
     const {backgroundUrl, avatar, username, redirectUrl} = this.state
 
@@ -60,51 +59,26 @@ class Poster extends Component {
     canvas.width = canvasWidth
     canvas.height = canvasWidth * bg.height / bg.width
 
-    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, 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
+    let r = 33
     const avatarImage = await this.getImage(avatar)
-    const ax = 20 * scale
-    const ay = 15 / 2 * scale
+    const ax = 40
+    const ay = 16
     ctx.save()
     ctx.beginPath()
-    ctx.arc(r + ax, r + ay, r, 0, Math.PI * 2)
+    ctx.arc(ax + r, ay + r, r, 0, Math.PI * 2)
     ctx.clip()
-    ctx.drawImage(avatarImage, ax, ay, 2 * r, 2 * r)
+    ctx.drawImage(avatarImage, ax, ay, 66, 66)
     ctx.restore()
 
 
-    ctx.font = `${12 * scale}px serif`
+    ctx.font = `24px serif`
     ctx.fillStyle = '#fff'
-    ctx.fillText(username, 2 * r + ax + (7 * scale), 22 * scale)
+    ctx.fillText(username, 2 * r + ax + 10, ay + r - 5)
 
-    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, 190 * scale, 400 * scale, 70, 70)
-    // 540 384 810
-    // 894 636 1342
-    // ctx.drawImage(qrcode, 220, 450, 60, 60)
-    // document.body.appendChild(canvas)
+    let qrcode = await this.getQRCodeCanvas(redirectUrl, posterWidth)
+    ctx.drawImage(qrcode, 380, 796, 140, 140)
 
 
     this.setState({
@@ -127,9 +101,9 @@ class Poster extends Component {
     })
   }
 
-  getQRCodeCanvas = (text, scale, posterWidth) => {
+  getQRCodeCanvas = (text, posterWidth) => {
     const canvas = document.createElement('canvas')
-    let codeWidth = 100 * scale, codeHeight = 100 * scale,
+    let codeWidth = 100, codeHeight = 100,
       codeSize = posterWidth * (100 / (window.innerWidth * 0.72))
 
 
@@ -138,8 +112,6 @@ class Poster extends Component {
     canvas.width = codeWidth
     canvas.height = codeHeight
 
-    document.body.appendChild(canvas)
-
     return QRCode.toCanvas(canvas, text)
   }