Implement scanning code gun and generating QR code

Preface

For example:

Products have their own serial numbersSN. Then when we package these products, we need to generate a productSNChecklist, stick it to the surface of the box to view. However, the lengthy serial numbers occupy a large placeholding, so can we generate a QR code for the serial numbers of these products? Then, we can know what serial number product is contained in this box by scanning the code.

Scan the code gun to scan the code

This is relatively simple. First, we got the QR code scan gun and connected it to the computer.

Then, place the mouse cursor in the input box or navigation bar, aim the scan gun at the serial number barcode of the product and scan the corresponding content on the page.

This article only considers the input box

To do this, we build an input box in the page.

Core html code:

<nz-input-group [nzSuffix]="suffixIconSearch">
  <input type="text" nz-input placeholder="Please focus your mouse to this point and use the QR code scanner" [(ngModel)]="value" (input)="changeVal()"/>
</nz-input-group>
<ng-template #suffixIconSearch>
  <span nz-icon nzType="scan"></span>
</ng-template>

Core typescript code:

public value:string = ''; //Input the value of the box, scan the code and scan the value of the gun to scan it in.public hintValue: string = ''; // Prompt message// Changes in monitoring valuepublic changeVal():void {
  $.unsubscribe(); // rxjs interval method   && clearTimeout();
   = setTimeout(() => {
     = 'Add...'
    ();
    clearTimeout();
  }, 500)
}

We used it hereant design angular, and combinedrxjs

Generate QR code

To implement this function, we used the packagebwipjs. Here is a simple usage example:

<!-- html -->
<canvas ></canvas>

// javascript
 = function() {
  let qrcodeDom = ('qrcode');
  let canvas = (qrcodeDom, {
    bcid: 'datamatrix', // Code type    text: '110112119', // Code content    scale: 3, // Scaling    height: 20, // high    width: 20, // Width    scaleX: 3, // x-axis proportion    scaleY: 3, // y-axis proportion    includetext: true, // Display readable text    textxalign: 'center' // Text location  });
}

We can view the relevant parameter description directlybwipjs. I will not go into details here.

Actually, we usebcidType isqrcode. Because we need to add the site to the generated QR code, when the user scans the QR code with his mobile phone, he can jump to the corresponding site.

Interested readers can try to verify it on their own.

Thanks for reading.

The above is the detailed content of scanning the code gun and generating the QR code. For more information about scanning the code gun and scanning the code to generate the QR code, please pay attention to my other related articles!