taro开发小程序中后端返回字符串Canvas生成二维码

可以使用第三方库 `qrcode`，该库可以在后端生成二维码图片，然后将图片转换为 base64 编码的字符串，再将字符串返回给前端，前端可以使用 `<canvas>` 元素将 base64 编码的字符串转换为图片并显示在页面上。

以下是一个使用 `qrcode` 库在 Node.js 中生成二维码图片并返回 base64 编码字符串的示例代码：

const qrcode = require('qrcode');
const canvas = require('canvas');

// 生成二维码图片
qrcode.toCanvas('https://example.com', { errorCorrectionLevel: 'H' }, function (err, qrCanvas) {
  if (err) throw err;

  // 将 canvas 转换为 base64 编码的字符串
  const qrImage = qrCanvas.toDataURL();

  // 返回 base64 编码字符串
  res.send(qrImage);
});

在前端使用 `<canvas>` 元素将 base64 编码的字符串转换为图片并显示：

<canvas id="qr-canvas"></canvas>

<script>
const canvas = document.getElementById('qr-canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.onload = function () {
  ctx.drawImage(img, 0, 0);
};
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAMAAAC...';
</script>

在 Taro 开发小程序中，可以在页面中使用 `<canvas>` 元素，并在 `componentDidMount()` 生命周期函数中获取 canvas 上下文对象，然后从后端获取 base64 编码的二维码图片，并用 `drawImage()` 方法将图片绘制到 canvas 上。示例代码如下：

import Taro, { Component } from '@tarojs/taro';
import { Canvas } from '@tarojs/components';

class Qrcode extends Component {
  componentDidMount() {
    const ctx = Taro.createCanvasContext('qr-canvas', this.$scope);
    Taro.request({
      url: 'https://example.com/qrcode',
      success: res => {
        const img = new Image();
        img.onload = function () {
          ctx.drawImage(img, 0, 0);
        };
        img.src = res.data;
      }
    });
  }

  render() {
    return (
      <Canvas id="qr-canvas" style={{ width: '300px', height: '300px' }}></Canvas>
    );
  }
}

在上面的代码中，我们使用 `<Canvas>` 组件创建了一个 300 x 300 像素的 `<canvas>` 元素，并在 `componentDidMount()` 生命周期函数中获取 canvas 上下文对象，然后使用 `Taro.request()` 方法从后端获取 base64 编码的二维码图片，并在图片加载完成后使用 `drawImage()` 方法将图片绘制到 canvas 上。注意，这里需要使用 `Image` 对象来加载图片，因为 `drawImage()` 方法只支持加载 `Image` 对象。