Taro 小程序分享二维码图片

定义分享按钮和canvas画布

// 分享按钮
<View className='job-bottom-share share' onClick={() => this.handleOpenShare()}>
  <View>
    <Text className='iconfont icon-share-ic share-img'></Text>
  </View>
  <Text>分享</Text>
</View>
// canvas画布弹窗
{/* canvas */}
<View className={`canvas-index ${canvasVisible ? '' : 'cavas-hidden'}`}>
  {
    canvasType === 2 ?
      <View className='canvas-wrap'>
        <View className='canvas-top at-row at-row__justify--between at-row__align--center'>
          <Text>推荐好友</Text>
          <Image src={closeIcon} className='close-icon' onClick={() => handleCtrCanvasVisible(canvasVisible, -1)} />
        </View>
        <Canvas
          id='cardCanvas'
          canvas-id='cardCanvas'
          className='card-canvas'
          // style='width: 320px; height: 450px'
          type='2d'
          canvasId='cardCanvas' >
        </Canvas>
        <Button onClick={this.saveCard} className='btn-save' type='primary' size='mini'>保存到相册</Button>
      </View> : ''
  }
  {
    canvasType === 1 ?
      <View className='canvas-wrap share-wrap'>
        <View className='canvas-top at-row at-row__justify--between at-row__align--center'>
          <Text>推荐好友</Text>
          <Image src={closeIcon} className='close-icon' onClick={() => handleCtrCanvasVisible(canvasVisible, -1)} />
        </View>
        <View className='wecaht-content at-row at-row__justify--between at-row__align--center'>
          <Button openType='share' className='share-friend' onClick={() => this.handleShare()}>
            <Image src={wechatIcon} className='wechat-icon' />
            <View className='share-txt'>转发给好友或群聊</View>
          </Button>
          <View onClick={() => handleCtrCanvasVisible(false, 2)}>
            <Image src={friendIcon} className='wechat-icon' />
            <View className='share-txt'>生成朋友圈图片</View>
          </View>
        </View>
      </View> : ''
  }
  {
    canvasType === 3 ?
      <View className='canvas-wrap share-wrap'>
        <View className='canvas-top at-row at-row__justify--end at-row__align--end'>
          <Image src={closeIcon} className='close-icon' onClick={() => handleCtrCanvasVisible(canvasVisible, -1)} />
        </View>
        <View className='wecaht-content new-pad at-row at-row__justify--center at-row__align--center'>
          <View>
            <Image src={saveOkIcon} className='save-icon' />
            <View className='save-ok share-txt'>图片已保存到系统相册</View>
          </View>
        </View>
        <View className='close-btn' size='mini' onClick={() => handleCtrCanvasVisible(canvasVisible, -1)} >我知道了</View>
      </View> : ''
  }
</View>

打开分享的弹窗

// 点击触发打开分享的弹窗
handleOpenShare() {
    // this.drawImage()
    const { handleCtrCanvasVisible, canvasVisible } = this.props
    // console.log({canvasVisible})
    handleCtrCanvasVisible(canvasVisible, 1)
    let _this = this
    if (canvasVisible) {
      // 创建一个选择器对象
      const query = Taro.createSelectorQuery()
      // 选择当前页面下第一个 #canvas
      // 返回 NodesRef 用于获取 WXML 节点信息的对象
      query.select('#cardCanvas').fields({ node: true, size: true })
        .exec((res) => {
          _this.drawImage(res)

        })
    }
  }
  
// 这个时候可能会取不到canvas的id，所以要在componentDidUpdate的时候
 componentDidUpdate() {
    const { canvasVisible, canvasType } = this.props
    let _this = this
    // 创建一个选择器对象
    const query = Taro.createSelectorQuery()
    // 有#cardCanvas再调用this.drawImage
    if (canvasVisible && canvasType === 2 && query.select('#cardCanvas')) {
      // 选择当前页面下第一个 #canvas
      // 返回 NodesRef 用于获取 WXML 节点信息的对象
      query.select('#cardCanvas').fields({ node: true, size: true })
        .exec((res) => {
          _this.drawImage(res)

        })
    }
  }

Canvas绘制方法

/**
   * drawImage() 定义绘制图片的方法
   */
  drawImage(res) {
    // console.log({ res })
    const { jobdetail = {}, userInfo } = this.props
    const { name, RecruiType = '', CompanyName = '', Salary = '', City = '', Department = '', RecruitNum, modifiedTime, JobDescription, PositionDes, PositionRequire, elink, id } = jobdetail
    const salary = Salary ? JSON.parse(Salary).name : '';
    // const { jobId } = this.$router.params
    const { jobId } = this.state
    // console.log('drawImage jobId', this.$router.params.jobId, jobId)
    
    const canvas = res[0].node
    this.canvas = canvas
    // console.log({canvas})
    // Canvas 的绘图上下文
    const ctx = canvas.getContext('2d')

    // 设备像素比
    // 这里根据像素比来设置 canvas 大小
    const dpr = Taro.getSystemInfoSync().pixelRatio
    canvas.width = 380 * dpr
    canvas.height = 675 * dpr
    // console.log({ ctx })
    ctx.scale(dpr, dpr)
    ctx.fillStyle = '#5B9AFF'
    ctx.fillRect(0, 0, 380, 675)
    // ctx.fillRect(0, 0, 100, 100)
    // 绘制文本
    // ctx.setFontSize(36)
    ctx.font = `normal 300 36px PingFangSC-Light,PingFang`
    ctx.fillStyle = '#fff'
    ctx.fillText('热招职位', 113, 60)
    // ctx.textAlign='center'

    // 绘制矩形
    ctx.fillStyle = "#fff";
    ctx.fillRect(24, 132, 331, 508);
    // ctx.textAlign='center'
    // ctx.stroke();
    // 绘制文本
    ctx.font = `normal 500 24px PingFangSC-Light,PingFang`
    ctx.fillStyle = '#313753'
    ctx.fillText(name, 130, 193)
    // ctx.textAlign='center'

    // 绘制文本
    ctx.font = `normal 500 24px PingFangSC-Light,PingFang`
    ctx.fillStyle = '#F4A25A'
    ctx.fillText(`${salary || ''} ${City ? '|' : ''} ${City || ''}`, 105, 243)
    // ctx.textAlign='center'
    // 绘制文本
    ctx.font = `normal 400 16px PingFangSC-Light,PingFang`
    ctx.fillStyle = '#313753'
    ctx.fillText(CompanyName || '', 158, 292)
    // ctx.textAlign='center'
    const tenantId = Taro.getStorageSync('tenantId') // 租户id
    const referrer = userInfo.passid // 推荐人id,谁分享谁就是推荐人
    // 获取图片信息
    Taro.getImageInfo({
      src: `${fly.config.baseURL}/open_api/getQRcode?jobId=${jobId}&tenantId=${tenantId}&referrer=${referrer}`,
      success: resImg => {
        // 创建一个图片对象
        const img = canvas.createImage();

        img.src = resImg.path
        img.onload = () => {
          // 绘制图像到画布
          ctx.drawImage(img, 94, 338, 191, 191)
        }
      },
      fail(fail) {
        console.log(fail)
      }
    })

    // 绘制文本
    ctx.font = `normal 400 14px PingFangSC-Light,PingFang`
    ctx.fillStyle = '#313753'
    ctx.fillText('长按查看职位详情', 133, 580)
    ctx.textAlign = 'center'


  }

  /**
  * saveCard() 保存图片到本地
  */
  saveCard() {
    const { handleCtrCanvasVisible } = this.props
    // 将Canvas图片内容导出指定大小的图片
    Taro.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 750,
      height: 1334,
      destWidth: 750,
      destHeight: 1334,
      canvasId: '#cardCanvas',
      canvas: this.canvas,
      success(res) {
        Taro.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(saveRes) {
            console.log(saveRes, 'saveRes')
            handleCtrCanvasVisible(false, 3) // 关闭canvas弹窗
            // Taro.showModal({
            //   title: '图片保存成功',
            //   content: '图片成功保存到相册了，快去发朋友圈吧~',
            //   showCancel: false,
            //   confirmText: '确认'
            // })
          }
        })
      },
      fail(fail) {
        console.log(fail)
        Taro.showModal({
          title: '图片保存失败',
          content: '请重新尝试!',
          showCancel: false,
          confirmText: '确认'
        })
      }
    })
  }

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长