My awesome qrcode

This project cloned from the original library QR Code Styling by Denys Kozak and was modified by Takdanai Lerksakunchai.

The different point between original and this version

I've added background image customization features into this version, so that's the difference

Customization

Everything based on the original project, but it has some new thing to know. If you want to add background image, you must add backgroundImageOptions options when instanciate the QRCode object and set the path of image background by using backgroundImage attribute.

this.qrCode = new QRCodeStyling({
    width: 200,
    height: 200,
    type: 'svg',
    data: this.data,
    image: '../../assets/images/Manchester_United_FC_crest.svg.png',
    backgroundImage: '../../assets/images/Manchester_United_FC_crest.svg.png',
    margin: 10,
    qrOptions: {
    typeNumber: 0,
    mode: 'Byte',
    errorCorrectionLevel: 'Q'
    },
    imageOptions: {
    hideBackgroundDots: true,
    imageSize: 0.5,
    margin: 10,
    crossOrigin: 'anonymous',
    },
    dotsOptions: {
    color: '#BD022D',
    // gradient: {
    //   type: 'linear', // 'radial'
    //   rotation: 0,
    //   colorStops: [{ offset: 0, color: '#8688B2' }, { offset: 1, color: '#77779C' }]
    // },
    type: 'rounded'
    },
    backgroundOptions: {
    enable: false,
    color: '#e9ebee',
    // gradient: {
    //   type: 'linear', // 'radial'
    //   rotation: 0,
    //   colorStops: [{ offset: 0, color: '#ededff' }, { offset: 1, color: '#e6e7ff' }]
    // },
    },
    backgroundImageOptions: {
    enable: true,
    opacity: 2
    },
    cornersSquareOptions: {
    color: '#BD022D',
    type: 'extra-rounded',
    // gradient: {
    //   type: 'linear', // 'radial'
    //   rotation: 180,
    //   colorStops: [{ offset: 0, color: '#25456e' }, { offset: 1, color: '#4267b2' }]
    // },
    },
    cornersDotOptions: {
    color: '#BD022D',
    type: 'dot',
    // gradient: {
    //   type: 'linear', // 'radial'
    //   rotation: 180,
    //   colorStops: [{ offset: 0, color: '#00266e' }, { offset: 1, color: '#4060b3' }]
    // },
    }
});