Taro 小程序实现分享二维码图片功能代码

以下是 Taro 小程序实现分享二维码图片功能的代码：

import Taro, { useState, useEffect } from '@tarojs/taro'
import { View, Button, Image } from '@tarojs/components'
import QRCode from 'qrcode'
import './index.scss'

function Index() {
  const [qrCodeUrl, setQrCodeUrl] = useState('')
  const [canvasWidth, setCanvasWidth] = useState(0)
  const [canvasHeight, setCanvasHeight] = useState(0)

  // 生成二维码
  useEffect(() => {
    QRCode.toDataURL('https://www.example.com')
      .then(url => {
        setQrCodeUrl(url)
      })
      .catch(err => {
        console.error(err)
      })
  }, [])

  // 计算 canvas 的宽高
  useEffect(() => {
    const query = Taro.createSelectorQuery()
    query.select('.canvas-container')
      .boundingClientRect()
      .exec(res => {
        if (res[0]) {
          setCanvasWidth(res[0].width)
          setCanvasHeight(res[0].height)
        }
      })
  }, [])

  // 保存图片到本地相册
  const saveImageToPhotosAlbum = () => {
    Taro.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: canvasWidth,
      height: canvasHeight,
      canvasId: 'qr-code-canvas'
    }).then(tempFilePath => {
      Taro.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          Taro.showToast({
            title: '保存成功'
          })
        },
        fail: () => {
          Taro.showToast({
            title: '保存失败',
            icon: 'none'
          })
        }
      })
    })
  }

  return (
    <View className='index'>
      <View className='canvas-container'>
        <canvas
          id='qr-code-canvas'
          style={{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }}
          className='qr-code-canvas'
        />
      </View>
      <Button onClick={saveImageToPhotosAlbum}>保存图片到相册</Button>
      {qrCodeUrl && (
        <Image
          className='qr-code-image'
          src={qrCodeUrl}
          mode='widthFix'
        />
      )}
    </View>
  )
}

Index.config = {
  navigationBarTitleText: '分享二维码图片'
}

export default Index

这段代码实现了以下功能：

1. 引入了 `qrcode` 库，通过 `QRCode.toDataURL()` 方法生成一个二维码图片的 base64 编码，并将其保存在组件状态中。
2. 使用 `useEffect()` 钩子函数计算了 canvas 的宽高，并将它们保存在组件状态中。
3. 在渲染时，将生成的二维码图片用 `<canvas>` 元素绘制出来，并将 canvas 的宽高设置为组件状态中计算出的值。同时，用 `<Image>` 元素展示生成的二维码图片。
4. 当用户点击保存按钮时，将 canvas 中的内容转化为临时文件路径，再通过 `Taro.saveImageToPhotosAlbum()` 方法将其保存到用户的本地相册中。

需要注意的是，这段代码中使用的 `canvasToTempFilePath()` 方法需要在 Taro 2.2.1 及以上版本才能使用。如果你的 Taro 版本较低，可以考虑使用 `canvasToTempFilePathSync()` 方法。