taro canvas 生成海報

前言

  • ?? 一下這幾天寫小程序，使用 canvas 動態(tài)生成海報，下載分享的效果
  • 使用 taro 做小程序，因為可以用 React，使用了最新的 React hooks 的方式（好像也不新了）

  • 剛開始寫感覺很累，因為沒有搞過小程序，并且也不會用 canvas，我只能寫一點，編譯一下看效果??，走了很多彎路，花了很多心思，結果出來后，感覺自己太笨了（學習能力還有待提高）


    成品效果.png
  • 按鈕樣式還沒有改，等成品出來改一下 （打個小廣告）

下載網(wǎng)絡圖片，處理多張圖片

  • 因為要動態(tài)畫頭像，需要把網(wǎng)絡圖片地址，下載后畫到 canvas 中

封裝一個處理多張圖片的 promise

  • 因為不想使用 getImageInfo 一層層嵌套，圖片很多的話，豈不是亂的像??一樣。
// 處理多張網(wǎng)絡圖片
  const processMultipleImages = (url) => {
    return new Promise((resolve, reject) => {
      Taro.getImageInfo({
        src: url,
        success: (res) => {
          resolve(res)
        },
        fail: () => {
          Taro.showToast({
            title: '下載失敗!'
          })
        }
      })
    })
  }

處理所有圖片

  • 使用 promise.all 轉(zhuǎn)換所有的圖片地址
 // 獲取基本信息
  useEffect(() => {
    // 獲取所有的網(wǎng)絡圖片
    Promise.all(
      imageAry.map(img => processMultipleImages(img))
    ).then(images => {
      const imgAll = images.map(i => i.path)
      SetUrl(imgAll)
    })
  }, [])

畫主體

獲取屏幕信息

  • 主要是獲取寬度和高度，動態(tài)給 canvas 設置寬高，已經(jīng) canvas 間距，rate 表示轉(zhuǎn)換的倍數(shù)（根據(jù)設計稿的標準寬高），目前是用的這種方式，網(wǎng)上看了很多都沒有轉(zhuǎn)換，難道不用根據(jù)設備適配嗎？還是說我用的方式不對，業(yè)務催得緊沒有仔細研究，如果你知道的話，歡迎交流~
    const d = Taro.getSystemInfoSync()
    const w = d.windowWidth * 0.85
    const h = (w / 0.75).toFixed(2)
    const rate = (d.windowWidth / 375).toFixed(2)
    SetWidth(w)
    SetHeight(h)
    SetRate(rate)
  • 寬度和高度
  return (
    <View className="share-user-container">
      <Canvas style={{width: `${width}px`, height: `${height}px`}} canvasId="shareuser" id="shareuser" className="canvas-wrapper"></Canvas>
      <Button onClick={onClickSaveImage}>保存到相冊</Button>
    </View>
  )

圓形頭像

    const ctx = Taro.createCanvasContext('shareuser');
   // 畫內(nèi)圓 并 填充頭像
    ctx.beginPath()
    const x = 56 * rate
    const y = 74 * rate + 64 * rate
    ctx.arc(x, y, 64 * rate, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(imageUrl[0], 0 * rate, 74 * rate, 128 * rate, 128 * rate)
    ctx.closePath()
    ctx.restore()
    // 繪制文本
    drawText(ctx, '#1D1E1F', '來自xxx 的脫單團', 66 * rate, 24 * rate, 12)
    ctx.save()

  • 這里頭像可能會壓縮，導致很丑

  • drawText 繪制文字方法

// 繪制文本
  const drawText = (ctx, color, text, x, y, font = 16) => {
    ctx.setFontSize(font)
    ctx.setFillStyle(color)
    ctx.setTextAlign('left')
    ctx.fillText(text, x, y)
    ctx.stroke()
    ctx.closePath()
  }

畫圓

// 畫外圓
    ctx.beginPath()
    ctx.arc(56 * rate, 140 * rate, 80 * rate, 0, 2*Math.PI)
    ctx.lineWidth = 16 * rate
    ctx.clip()
    ctx.strokeStyle = "#FFE04A";
    ctx.stroke()
    ctx.closePath()

二維碼

  • 這里的二維碼目前是寫死的，但業(yè)務需要動態(tài)生成，等我做了加上待更新...
  • 更新了這里，可以去看一下 小程序動態(tài)生成二維碼 
    const size14 = 14 * rate
    // 繪制二維碼
    ctx.drawImage(imageUrl[1], 210 * rate, 120 * rate, 86 * rate, 86 * rate)
    drawText(ctx, '#1D1E1F', '掃碼認識Ta', 216 * rate, 220 * rate, size14)

最后生成圖片

  • 這里微信的官方說，放到 ctx.draw() 的 callback 里面，但是沒有執(zhí)行，不知道為啥，這里就先使用了 setTimeout 模擬異步生成
   setTimeout(() => {
      Taro.canvasToTempFilePath({
        x:0,
        y:0,
        width,
        height,
        canvasId: 'shareuser',
        success: (result) => {
          SetImage(result.tempFilePath)
        },
        fail: (err) => {
          Taro.showToast('圖片生成失?。?)
        }
      })
    }, 600)

保存到相冊中，需要用戶授權

  • 調(diào)用授權，需要兼容如果用戶點擊取消的操作
// 保存到相冊
  const onClickSaveImage = () => {
    Taro.getSetting({
      success(res) {
        // 如果沒有授權過，則要獲取授權
        if (!res.authSetting['scope.writePhotosAlbum']) {
          Taro.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              // 保存圖片
              savePictureSystem()
            },
            fail() { // 用戶拒絕
              Taro.showModal({
                title: '授權',
                content: '您拒絕了授權請求，是否要手動開啟？',
                success: function (res) {
                  if (res.confirm) {
                    Taro.openSetting({
                      success: function (res) {
                        console.log(res.authSetting)
                        res.authSetting = {
                          "scope.userInfo": true,
                          "scope.userLocation": true
                        }
                      }
                    })
                  } else if (res.cancel) {
                    Taro.showToast({
                      title: '保存失?。?,
                      icon: 'close',
                      duration: 2000
                    })
                  }
                }
              })
            }
          })
        } else { // 如果已經(jīng)授權過，可以直接保存
          savePictureSystem()
        }
      }
    })
  }

 // 把圖片保存到系統(tǒng)中
  const savePictureSystem = () => {
    Taro.saveImageToPhotosAlbum({
      filePath: saveImage,
      success(res) {
        Taro.showToast({
          title: '保存成功!'
        })
      },
      fail() {
        Taro.showToast({
          title: '保存失敗!',
          icon: 'close',
          duration: 2000
        })
      }
    })
  }

所有代碼

// 獲取基本信息
  useEffect(() => {
    const d = Taro.getSystemInfoSync()
    const w = d.windowWidth * 0.85
    const h = (w / 0.75).toFixed(2)
    const rate = (d.windowWidth / 375).toFixed(2)
    SetWidth(w)
    SetHeight(h)
    SetRate(rate)

    // 獲取所有的網(wǎng)絡圖片
    Promise.all(
      imageAry.map(img => processMultipleImages(img))
    ).then(images => {
      const imgAll = images.map(i => i.path)
      SetUrl(imgAll)
    })
  }, [])

  useEffect(() => {
    if (imageUrl.length > 0) {
      drawContent()
    }
  }, [imageUrl])

  // 畫主體內(nèi)容
  const drawContent = () => {
    const ctx = Taro.createCanvasContext('shareuser');
    const cx = 5 * rate + 20 * rate
    const cy = 12 * rate + 20 * rate
    // 背景顏色
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, width, height)
    ctx.save()

    // 頭像
    ctx.beginPath()
    ctx.arc(cx, cy, 20 * rate, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(imageUrl[0], 6 * rate, 12 * rate, 40 * rate, 40 * rate)
    ctx.restore()

    drawText(ctx, '#1D1E1F', '來自xxx 的脫單團', 66 * rate, 24 * rate, 12)
    ctx.save()
    // 畫外圓
    ctx.beginPath()
    ctx.arc(56 * rate, 140 * rate, 80 * rate, 0, 2*Math.PI)
    ctx.lineWidth = 16 * rate
    ctx.clip()
    ctx.strokeStyle = "#FFE04A";
    ctx.stroke()
    ctx.closePath()
    // 畫內(nèi)圓 并 填充頭像
    ctx.beginPath()
    const x = 56 * rate
    const y = 74 * rate + 64 * rate
    ctx.arc(x, y, 64 * rate, 0, 2 * Math.PI)
    ctx.clip()
    ctx.drawImage(imageUrl[0], 0 * rate, 74 * rate, 128 * rate, 128 * rate)
    ctx.closePath()

    ctx.restore()

    // 繪制圓圈裝飾
    ctx.beginPath()
    ctx.arc(250 * rate, 47 * rate, 18 * rate, 0, 2*Math.PI)
    ctx.lineWidth = 4 * rate
    ctx.strokeStyle = "#FFE04A";
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(200 * rate, 80 * rate, 9 * rate, 0, 2*Math.PI)
    ctx.lineWidth = 5 * rate
    ctx.strokeStyle = "#FFE04A";
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    ctx.arc(280 * rate, 98 * rate, 14 * rate, 0, 2*Math.PI)
    ctx.lineWidth = 10 * rate
    ctx.strokeStyle = "#FFE04A";
    ctx.stroke()
    ctx.closePath()

    drawFillCircle(ctx, 238, 83, 9)
    drawFillCircle(ctx, 220, 106, 8)
    drawFillCircle(ctx, 200, 140, 8)

    ctx.restore()

    const size14 = 14 * rate
    // 繪制二維碼
    ctx.drawImage(imageUrl[1], 210 * rate, 120 * rate, 86 * rate, 86 * rate)
    drawText(ctx, '#1D1E1F', '掃碼認識Ta', 216 * rate, 220 * rate, size14)

    // 繪制個人基本信息
    ctx.beginPath()
    const margin56 = 56 * rate
    drawText(ctx, '#1D1E1F', '某個用戶的昵稱', size14, 270 * rate, 20 * rate)
    drawText(ctx, '#1D1E1F', '資料', size14, 300 * rate, size14)
    drawText(ctx, '#1D1E1F', '這是個人信息|什么|換行', margin56 * rate, 300 * rate, size14)
    drawText(ctx, '#1D1E1F', '興趣', size14, 336 * rate, size14)
    drawText(ctx, '#1D1E1F', '唱歌、籃球、rap...', margin56 * rate, 336 * rate, size14)
    drawText(ctx, '#1D1E1F', '簡介', size14, 372 * rate, size14)
    drawText(ctx, '#1D1E1F', '這是一段很長的簡介...', margin56 * rate, 372 * rate, size14)


    ctx.draw()
    setTimeout(() => {
      Taro.canvasToTempFilePath({
        x:0,
        y:0,
        width,
        height,
        canvasId: 'shareuser',
        success: (result) => {
          SetImage(result.tempFilePath)
        },
        fail: (err) => {
          Taro.showToast('圖片生成失??！')
        }
      })
    }, 600)
  }

  // 處理多張網(wǎng)絡圖片
  const processMultipleImages = (url) => {
    return new Promise((resolve, reject) => {
      Taro.getImageInfo({
        src: url,
        success: (res) => {
          resolve(res)
        },
        fail: () => {
          Taro.showToast({
            title: '生成失敗!'
          })
        }
      })
    })
  }

  // 繪制實心圓
  const drawFillCircle = (ctx, x, y, r, w) => {
    ctx.beginPath()
    ctx.arc(x * rate, y * rate, r * rate, 0, 2*Math.PI)
    ctx.fillStyle = "#FFE04A";
    ctx.fill()
    ctx.closePath()
  }

  // 繪制文本
  const drawText = (ctx, color, text, x, y, font = 16) => {
    ctx.setFontSize(font)
    ctx.setFillStyle(color)
    ctx.setTextAlign('left')
    ctx.fillText(text, x, y)
    ctx.stroke()
    ctx.closePath()
  }

  // 保存到相冊
  const onClickSaveImage = () => {
    Taro.getSetting({
      success(res) {
        // 如果沒有授權過，則要獲取授權
        if (!res.authSetting['scope.writePhotosAlbum']) {
          Taro.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              savePictureSystem()
            },
            fail() { // 用戶拒絕
              Taro.showModal({
                title: '授權',
                content: '您拒絕了授權請求，是否要手動開啟？',
                success: function (res) {
                  if (res.confirm) {
                    Taro.openSetting({
                      success: function (res) {
                        console.log(res.authSetting)
                        res.authSetting = {
                          "scope.userInfo": true,
                          "scope.userLocation": true
                        }
                      }
                    })
                  } else if (res.cancel) {
                    Taro.showToast({
                      title: '保存失??！',
                      icon: 'close',
                      duration: 2000
                    })
                  }
                }
              })
            }
          })
        } else { // 如果已經(jīng)授權過，可以直接保存
          savePictureSystem()
        }
      }
    })
  }

  // 把圖片保存到系統(tǒng)中
  const savePictureSystem = () => {
    Taro.saveImageToPhotosAlbum({
      filePath: saveImage,
      success(res) {
        Taro.showToast({
          title: '保存成功!'
        })
      },
      fail() {
        Taro.showToast({
          title: '保存失敗!',
          icon: 'close',
          duration: 2000
        })
      }
    })
  }

  return (
    <View className="share-user-container">
      <Canvas style={{width: `${width}px`, height: `${height}px`}} canvasId="shareuser" id="shareuser" className="canvas-wrapper"></Canvas>
      <Button onClick={onClickSaveImage}>保存到相冊</Button>

    </View>
  )
}
最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容