Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

The front-end plug-in qrcode.js generates the QRCode

The basic use

Plug-in installation

CNPM install qrcodejs2 --save // or NPM install qrcodejs2 --saveCopy the code

Plug-in import

Use commonJS or ES6 modules

import QRCode from 'qrcodejs2'; // let QRCode = require('qrcodejs2');Copy the code

Reference: 👉 [Talk about front-end modularization mechanism]

Page container

Add a container label to the page

<div id="qrcode" ref="qrcode"></div>
Copy the code

instantiation

CreatQrCode () {let text = 'qR code content '; $refs.qrcode = new qrcode (this.$refs.qrcode, {text: text, $refs.qrcode, $refs.qrcode, {text: text, $refs. // correctLevel: qrcode.correctlevel.h, // Correctlevel.h)}Copy the code

Problem processing

1, clear the generated TWO-DIMENSIONAL code

This.$refs.qrcode.innerhtml = "; Qrcode.clear (); // Clear the two-dimensional code method twoCopy the code

2, dynamic replacement of the content of the TWO-DIMENSIONAL code

Let string=' new content 'qrcode.makecode (string)Copy the code

3, Error: code length overflow?

This is because the URL is too long, resulting in two-dimensional code loading error, can reduce the fault tolerance rate to deal with.

CorrectLevel: correctlevel.qrcode.correctlevel. H (fault tolerance level from low to high, respectively L, M, Q, H

4. What if the string is long and the TWO-DIMENSIONAL code display is fuzzy?

You can try to expand the generated two-dimensional code multiple first, and then fix the width and height of the DISPLAY above the CSS, so that you can expand the display pixel accuracy

.qrcode-wrap{ width: 128px; height: 128px; } .qrcode-wrap canvas, .qrcode-wrap img { width:100%; height:100%; } <div id="qrcode" class="qrcode-wrap"></div> creatQrCode() {let text = 'qrcode '; $refs.qrcode = new qrcode (this.$refs.qrcode, {text: text, width: 128 * 3, // width: 128 * 3, // height: 128 * 3, colorDark: '#000000', colorLight: '#ffffff', correctLevel: QRCode.CorrectLevel.H, }) }Copy the code

5, TWO-DIMENSIONAL code to take white edge how to do?

By default, the plug-in generates images without borders

🎨 if you only want borders on the page display

Scheme 1: Apply a style directly to the container, using the padding feature to extrude the white edge

.qrcode-border{ display: flex; width: 128px; height: 128px; box-sizing: border-box; padding: 10px; /* Padding */ border: 1px solid RGB (204, 204, 204); } <div id="qrcode" ref="qrcode" class="qrcode-border"></div>Copy the code

Solution 2: Add a border style to the container’s parent container

 .qrcode-container{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
        border: 1px solid #cccccc;
    }

<div class="qrcode-container">
        <div id="qrcode" ref="qrcode"></div>
 </div>
Copy the code

🍇 Effect display

✅PS: If you just want to [print] the white border, these two solutions will also work

Qrcode. js document NPM package address Github address

If you want to page and download the TWO-DIMENSIONAL code with white border

Can be combined with the plug-in HTML2Canvas to achieve (if there are other solutions, welcome to share)

Html2canvas is a plug-in that uses javascript to capture screen shots

CNPM install --save html2canvas // import html2canvas from "html2canvas";Copy the code

🎨 Main ideas:

  • First use QRCode to generate two-dimensional code pictures
  • Then html2Canvas is used to generate a new image of the QR code with the style
  • Hide the QRCode image generated by QRCode
<div ref="canvas" class="canvas-box" :style="{display:(originImg===true? 'none':'flex')}"> <div class="qrcode-box"> <div ref="qrcode" class="qrcode-img"></div> </div> <div class="qrcode-text"> </div> </div> <img: SRC ="imgUrl">Copy the code

PS: too much complete code on the separate fly book document, easy to view and copy 👉 complete code

🍒 Final Effect

Html2canvas document address

Making the address

Front-end plug-in JsBarcode generates bar codes

Installation and introduction

CNPM install jsbarcode --save // Import jsbarcode from 'jsbarcode'Copy the code

Page container

<template> <! -- Barcode container, optional SVG, Canvas, or IMG tag --> < SVG ID ="barcode"></ SVG ><! -- or --> <canvas id="barcode"></canvas> <! -- or --> <img id="barcode"/> </templateCopy the code

instantiation

Do not call the Jsbarcode library, such as the CREATE life cycle, when the DOM is not loaded

🎨 Jane version

JsBarcode('#barcode', 12345678, {displayValue: true // whether to display text below barcode})Copy the code

🎨 complex version

// Generate barcode JsBarcode('#barcode', '12345678', {format: "CODE39",// select the type of bar code to use width:3,// set the width between bars height:100,// height displayValue:true,// Whether to display text below the bar code text:"Axjy",// overwrite the displayed text FontOptions :"bold italic",// Make the text bold or italic font:"fantasy",// set the text font textAlign:"right",// set the horizontal text alignment TextPosition :"top",// Set the vertical position of the text textMargin:5,// Set the spacing between the bar code and the text fontSize:15,// Set the size of the text background:"#eee",// Set the background of the bar code LineColor :"#FF7F50",// Set the color of the bar and text. Margin :15// Set the margin around the bar code})Copy the code

Making the address

The document address

Bar code generator

extension

Common bar code type composition and description

instructions graphic
CODEBAR barcodeThis is a self-check code with no check bits; With photo LABS, books

Library, the content only supports 0~9, + – / $. : and other 6 special symbols
Code11 barcodeOnly 11 characters are allowed, which are 0-9 and “-“. In order to reduce the check error rate,

A two-digit check code can be used.
Code39 barcodeThe character set includes digits, uppercase letters, and characters such as -. $/ + %

Used in asset management, membership card, store code management, product label
Code 39 ExtendedThis is an extended version that supports the full ASCII character set

Code39 barcode. If there is a requirement to use Code39 bar codes other than numbers and caps

Alphabetic characters, and then this is the recommended bar code. This is based on Code39 barcode, which is also very simple and easy to use
Code93 barcodeIs full ASCII mode, can use all 128 ASCII characters.
Code128AThe character set includes uppercase letters, numbers, common punctuation marks, and some control characters.
Code128BThe character set includes upper – and lower-case letters, numbers, and common punctuation marks.
Code128CThe character set is a purely numeric sequence.
Code128AutoIs the best combination of the above three character sets.
instructions graphic
EAN13 Barcode for commodityIs a pure number, and the number of digits is 12, the last digit is the check code,

Make up 13 digits. It is mainly used for packaging and printing of various commodity retail industry.
EAN8 BarcodeIs a pure number, and the number of digits is 7, the last digit is the check code,

Consists of 8 digits. It is mainly used for packaging and printing of various commodity retail industry.
GS1-128 (EAN-128)Is the 128 code specified by UPC/EAN to represent the meaning rules,

The encoding mode is the same as code128 barcode.
ISBN bar code: ISBN is the international Standard Book Number (ISBN) type is based on EAN-13 and is mainly used for

Publications and books.
Cross 25 yards(Interleaved 2 of 5), often used in logistics management, character set is numeric only

If the number is even, an odd number is automatically preceded by “0”.
MSI barcodeMust be pure numbers 0-9, with one check code. Mainly used in libraries

And retail applications. In MSI fonts, parentheses are used to indicate the opening and closing characters.
UPC – A barcodeCommodity bar code is pure numbers, and the number is 11 digits, after the code

Add a check code to form a 12-digit number, used mainly in the United States and Canada.
UPC – E bar codeThe barcode for commodity is A pure number, which is reduced by UPC-A. The number of digits is 7.

The first digit must be 0, followed by a check code to form an 8-digit number.
instructions graphic
UPC E 2 DigitsFeatures the same as upC-A, with an additional 2 code bar code usually used for price purposes.
UPC-E 5 digitsFeatures the same as upC-A, with an additional 5 code bar code usually used for price purposes
POSTNET(Zip code technology) Bar codes are used to encode U.S. mail codes and are made up of 5 or 9 or 11 digits
Intelligent MailThis is smart Mail, which is the bar code that the United States Postal Service provides for domestic postal services that you can provide

5 digits (zip code)

9 digits (zip code + 4 code)

11 digits (zip code + 4 code + 2 digits)

conclusion

The main examples above are Vue versions, but both plug-ins are written in native JavaScript and do not rely on any libraries/frameworks, so both Jquery and React can be used

🎨 [thumbs up] [concerns] don’t get lost, more front-end dry goods waiting for you to unlock

Phase to recommend

👉 Mini-program custom Component super full utility guide

👉 How does web development security defend against various attacks

👉 Product, technology, design and other areas of the Internet “basic terms” literacy

Memo | 👉 HTTP status code is commonly used & request & response header & Cookies and collection request method