QRious & PixiJS Example

index.js

import QRCode from './QRCode'

const qrCode = new QRCode()

(async () => {
  const qrCodeImage = await qrCode.generateQrCode('http://example.com')
  const textures = await qrCode.getPixiTextures({ qrCode: qrCodeImage })
  const base64Image = await qrCode.generateTicketImage(textures)
  console.log('QRCode genereted', base64Image)
})()

QRCode.js

import * as PIXI from 'pixi.js'
import QRious from 'qrious'

export default class QRCode {
  constructor() {}
  
  // URLからQRコードを生成
  generateQrCode(url) {
    return new Promise((resolve) => {
      const qrCode = new QRious({
        backgroundAlpha: 0,
        size: '200',
        value: url
      })
      resolve(qrCode.toDataURL())
    })
  }
  
  // QRコードからPIXI.js用テクスチャを取得
  getPixiTextures(resources) {
    return new Promise((resolve) => {
      const loader = new PIXI.loaders.Loader()
      for (const key in resources) {
        loader.add(key, resources[key])
      }
      loader.load(({ resources }) => {
        resolve(resources)
      })
    })
  }
  
  // PIXI.jsでチケット画像を生成
  // レンダラからbase64画像を取得する
  generateTicketImage(resources, canvas) {
    return new Promise((resolve) => {
      const qrCodeTexture = resources.qrCode.texture
      
      // initialize renderer
      const renderer = PIXI.autoDetectRenderer(360, 640, {
        transparent: false,
        backgroundColor: 0xffffff,
        antialias: true,
        resolution: 2,
        interactive: false
      })
      
      // create stage
      const stage = new PIXI.Container()
      
      // create sprite & set position
      const qrCodeSprite = new PIXI.Sprite(qrCodeTexture)
      qrCodeSprite.anchor.set(0.5)
      qrCodeSprite.position.set(renderer.width / 4, renderer.height / 4)
      
      // add sprite to stage
      stage.addChild(qrCodeSprite)
      
      // create canvas element
      canvas.appendChild(renderer.view)
      
      // render stage
      renderer.render(stage)
      
      // return renderer to base64 image
      resolve(renderer.extract.base64())
    })
  }
}

Isn't this easier?

import { Texture } from 'pixi.js';
import QRious from 'qrious';

export const generateQRCode = (value, size = '200') => {
    const code = new QRious({
        backgroundAlpha: 0,
        size,
        value,
    });

    return Texture.from(code.toDataURL());
};

const texture = generateQRCode('https://google.com');
this.addChild(new Sprite(texture));