QRcode JAVASCRIPT UI Component API

QRcode Javascript API

Class

QRcode

QR Codes encode text values in a two-dimensional pattern.

Selector

smart-qrcode

Properties

Events

Methods

Properties

backgroundColorstring

Sets the background color of the QR Code element.

Default value

"white"

Example

Set the backgroundColor property.

 <smart-qrcode background-color='white'></smart-qrcode>

Set the backgroundColor property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.backgroundColor = 'yellow';

Get the backgroundColor property.

 const qrcode = document.querySelector('smart-qrcode');

 let backgroundColor = qrcode.backgroundColor;

displayLabelboolean

Sets whether the QR Code label is visible.

Default value

false

Example

Set the displayLabel property.

 <smart-qrcode display-label></smart-qrcode>

Set the displayLabel property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.displayLabel = true;

Get the displayLabel property.

 const qrcode = document.querySelector('smart-qrcode');

 let displayLabel = qrcode.displayLabel;

embedImagestring

Sets an embedded image.

Default value

Example

Set the embedImage property.

 <smart-qrcode embed-image=''></smart-qrcode>

Set the embedImage property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.embedImage = '';

Get the embedImage property.

 const qrcode = document.querySelector('smart-qrcode');

 let embedImage = qrcode.embedImage;

errorLevelstring

Sets the error correction level.

Default value

"H"

Example

Set the errorLevel property.

 <smart-qrcode error-level='H'></smart-qrcode>

Set the errorLevel property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.errorLevel = 'L';

Get the errorLevel property.

 const qrcode = document.querySelector('smart-qrcode');

 let errorLevel = qrcode.errorLevel;

imageBackgroundColorstring

Sets color to the transparent parts of the embedded image. Background remains transparent if set to empty string.

Default value

Example

Set the imageBackgroundColor property.

 <smart-qrcode image-background-color='blue'></smart-qrcode>

Set the imageBackgroundColor property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.imageBackgroundColor = 'white';

Get the imageBackgroundColor property.

 const qrcode = document.querySelector('smart-qrcode');

 let imageBackgroundColor = qrcode.imageBackgroundColor;

imageHeightnumber

Sets the height of the embedded image.

Default value

Example

Set the imageHeight property.

 <smart-qrcode image-height=''></smart-qrcode>

Set the imageHeight property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.imageHeight = ;

Get the imageHeight property.

 const qrcode = document.querySelector('smart-qrcode');

 let imageHeight = qrcode.imageHeight;

imageWidthnumber

Sets the width of the embedded image.

Default value

Example

Set the imageWidth property.

 <smart-qrcode image-width=''></smart-qrcode>

Set the imageWidth property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.imageWidth = ;

Get the imageWidth property.

 const qrcode = document.querySelector('smart-qrcode');

 let imageWidth = qrcode.imageWidth;

labelColorstring

Sets the color of the QR Code label.

Default value

"black"

Example

Set the labelColor property.

 <smart-qrcode label-color='white'></smart-qrcode>

Set the labelColor property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelColor = 'red';

Get the labelColor property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelColor = qrcode.labelColor;

labelFontstring

Sets the font family of the QR Code label.

Default value

"monospace"

Example

Set the labelFont property.

 <smart-qrcode label-font='monospace'></smart-qrcode>

Set the labelFont property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelFont = 'sans-serif';

Get the labelFont property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelFont = qrcode.labelFont;

labelFontSizenumber

Sets the font size of the QR Code label.

Default value

Example

Set the labelFontSize property.

 <smart-qrcode label-font-size='14'></smart-qrcode>

Set the labelFontSize property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelFontSize = 10;

Get the labelFontSize property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelFontSize = qrcode.labelFontSize;

labelMarginBottomnumber

Sets the bottom margin of the QR Code label.

Default value

Example

Set the labelMarginBottom property.

 <smart-qrcode label-margin-bottom='5'></smart-qrcode>

Set the labelMarginBottom property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelMarginBottom = 0;

Get the labelMarginBottom property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelMarginBottom = qrcode.labelMarginBottom;

labelMarginTopnumber

Sets the top margin of the QR Code label.

Default value

Example

Set the labelMarginTop property.

 <smart-qrcode label-margin-top='5'></smart-qrcode>

Set the labelMarginTop property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelMarginTop = 5;

Get the labelMarginTop property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelMarginTop = qrcode.labelMarginTop;

labelPosition"top" | "bottom"

Sets the position of the QR Code label.

Default value

"bottom"

Example

Set the labelPosition property.

 <smart-qrcode label-position='bottom'></smart-qrcode>

Set the labelPosition property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.labelPosition = 'top';

Get the labelPosition property.

 const qrcode = document.querySelector('smart-qrcode');

 let labelPosition = qrcode.labelPosition;

lineColorstring

Sets the color of the QR Code lines.

Default value

"black"

Example

Set the lineColor property.

 <smart-qrcode line-color='balck'></smart-qrcode>

Set the lineColor property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.lineColor = 'green';

Get the lineColor property.

 const qrcode = document.querySelector('smart-qrcode');

 let lineColor = qrcode.lineColor;

squareWidthnumber

Sets the width of the QR Code square.

Default value

Example

Set the squareWidth property.

 <smart-qrcode square-width='4'></smart-qrcode>

Set the squareWidth property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.squareWidth = 6;

Get the squareWidth property.

 const qrcode = document.querySelector('smart-qrcode');

 let squareWidth = qrcode.squareWidth;

renderAs"svg" | "canvas"

Sets the rendering mode of the QR Code.

Default value

"svg"

Example

Set the renderAs property.

 <smart-qrcode render-as='svg'></smart-qrcode>

Set the renderAs property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.renderAs = 'canvas';

Get the renderAs property.

 const qrcode = document.querySelector('smart-qrcode');

 let renderAs = qrcode.renderAs;

valuestring

Sets or gets the value of the QR Code.

Default value

Example

Set the value property.

 <smart-qrcode value='A2402B'></smart-qrcode>

Set the value property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.value = 'example';

Get the value property.

 const qrcode = document.querySelector('smart-qrcode');

 let value = qrcode.value;

widthnumber

Sets or gets the width of the QR Code. If the width is set to 0, the width of the QR Code is calculated automatically.

Default value

Example

Set the width property.

 <smart-qrcode width='10'></smart-qrcode>

Set the width property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.width = null;

Get the width property.

 const qrcode = document.querySelector('smart-qrcode');

 let width = qrcode.width;

heightnumber

Sets or gets the height of the QR Code. If the height is set to 0, the height of the QR Code is calculated automatically.

Default value

Example

Set the height property.

 <smart-qrcode height='10'></smart-qrcode>

Set the height property by using the HTML Element's instance.

 const qrcode = document.querySelector('smart-qrcode');

 qrcode.height = null;

Get the height property.

 const qrcode = document.querySelector('smart-qrcode');

 let height = qrcode.height;

Events

invalidCustomEvent

This event is triggered when the value of the QR Code is invalid.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onInvalid

Arguments

evCustomEvent

ev.detailObject

ev.detail.invalidCharacters - An array indicating the invalid characters.

ev.detail.lengthValidity - A boolean indicating the length validity.

ev.detail.patternValidity - A boolean indicating the pattern validity.

ev.detail.value - the invalid value of the QR Code.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of invalid event.

const qrcode = document.querySelector('smart-qrcode');
qrcode.addEventListener('invalid', function (event) {
    const detail = event.detail,
        invalidCharacters = detail.invalidCharacters,
        lengthValidity = detail.lengthValidity,
        patternValidity = detail.patternValidity,
        value = detail.value;

	// event handling code goes here.
})

Methods

export( format: string, fileName?: string): void

Exports the QR Code.

Arguments

formatstring

The format of the exported file - svg, png, jpg

fileName?string

The name of the exported file

Invoke the export method.

const qrcode = document.querySelector('smart-qrcode');
qrcode.export();

getDataURL( format: string): string

Gets the base64 string of the QR Code

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsstring

Invoke the getDataURL method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.getDataURL("svg","png");

getDataURLAsync( format: string): object

Gets the base64 string of the QR Code

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsobject

Invoke the getDataURLAsync method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.getDataURLAsync("svg","png");

isValid(): boolean

Gets the validity of the QR Code

Returnsboolean

Invoke the isValid method.

const qrcode = document.querySelector('smart-qrcode');
const result = qrcode.isValid();