小程序不支持 DOM 操作，使用小程序 canvas API 自己绘制吧。

Taro 运行时暂时没有接入 Canvas Element API，但可以将这部分 API 代理到 小程序 <canvas> 组件，使用组件提供的api。这样就可以使用Canvas的第三方库了。这个需要新特性开发。

欢迎贡献！

在webpack4下 qrcode是可以正常使用的 @AdvancedCat

Buffer 有关把? 看看 #13656

原本在 webpack4 下是以下使用方式

QRCode.toDataURL(userInfo.username, opts)

现在 webpack5 必须获取小程序的canvas实例传递不然就报错了

QRCode.toDataURL(canvasNode, userInfo.username, opts)

taro 3.5+ 使用webpack5构建

首先taro 3.5+ 相比 3.4 增加 browser 解析，如果npm package.json 中配置了 browser，那么优先导入 browser

mainFields: [ 'browser', 'module', 'jsnext:main', 'main' ],

所以 qrcode 3.5+ 和 3.4 打包的入口变了，那么 3.5+ 要改变qrcode的入口；其次 webpack5默认不在添加 node fallback ，需要手动处理，所以改了qrcode 之后会报一些npm not found

最终添加如下webpack配置即可解决

...
 alias: {
    qrcode: 'qrcode/lib/server',
    fs: 'node-libs-browser/mock/fs',
    stream: 'stream-browserify',
    zlib: 'browserify-zlib',
    util: 'util',
  },
...

taro 3.5+ 使用webpack5构建

首先taro 3.5+ 相比 3.4 增加 browser 解析，如果npm package.json 中配置了 browser，那么优先导入 browser

mainFields: [ 'browser', 'module', 'jsnext:main', 'main' ],

所以 qrcode 3.5+ 和 3.4 打包的入口变了，那么 3.5+ 要改变qrcode的入口；其次 webpack5默认不在添加 node fallback ，需要手动处理，所以改了qrcode 之后会报一些npm not found

最终添加如下webpack配置即可解决

...
 alias: {
    qrcode: 'qrcode/lib/server',
    fs: 'node-libs-browser/mock/fs',
    stream: 'stream-browserify',
    zlib: 'browserify-zlib',
    util: 'util',
  },
...

在config的mini下面这个配置这个就好了，我做了好多实验，对比webpack4和webpack5，qrcode运行的步骤，需要安装对应的polyfill包，stream-browserify，browserify-zlib，util，process，

webpackChain(chain) {
      // qrcode需要这些nodejs的polyfill包，提供生成图片的base64逻辑，如果不加，会走浏览器环境配置，通过canvas.getContext获取base64，在小程序里面会报错
    chain.merge({
      resolve: {
        fallback: {
          stream: require.resolve('stream-browserify'),
          zlib: require.resolve('browserify-zlib'),
          util: require.resolve('util'),
        },
      },
    })
    chain
      .plugin('provide')
      .use(require.resolve('webpack/lib/ProvidePlugin'), [
        {
          process: 'process/browser.js',
          Buffer: ['buffer', 'Buffer'],
        },
      ])
  },