### Install uQRCode using npm Source: https://context7.com/sansnn/uqrcode/llms.txt This snippet shows how to install the uQRCode library using npm. It provides two package name options for installation. ```bash # 使用npm安装 npm install uqrcodejs # 或者 npm install @uqrcode/js ``` -------------------------------- ### Create UQRCode Instance and Set Properties Source: https://context7.com/sansnn/uqrcode/llms.txt This example demonstrates three ways to create a UQRCode instance: setting properties individually after creation, passing an options object during instantiation, or providing both options and a Canvas context. ```javascript // 方式1：无参数创建实例后逐个设置属性 var qr = new UQRCode(); qr.data = "https://uqrcode.cn/doc"; qr.size = 200; qr.margin = 10; qr.foregroundColor = "#000000"; qr.backgroundColor = "#FFFFFF"; // 方式2：通过options对象创建实例 var qr = new UQRCode({ data: "https://uqrcode.cn/doc", size: 200, margin: 10, foregroundColor: "#000000", backgroundColor: "#FFFFFF", errorCorrectLevel: UQRCode.errorCorrectLevel.H }); // 方式3：同时传入options和canvasContext var canvas = document.getElementById("qrcode"); var ctx = canvas.getContext("2d"); var qr = new UQRCode({ data: "https://uqrcode.cn/doc", size: 200 }, ctx); ``` -------------------------------- ### Import uQRCode with ES Module Source: https://context7.com/sansnn/uqrcode/llms.txt Demonstrates how to import the UQRCode class using ES Module syntax after installation via npm. Two import paths are shown corresponding to the installation options. ```javascript // npm安装后引入 import UQRCode from 'uqrcodejs'; // 或者 import UQRCode from '@uqrcode/js'; ``` -------------------------------- ### Generate QR Code Matrix with make() Source: https://context7.com/sansnn/uqrcode/llms.txt This example shows how to use the `make()` method to generate the QR code data matrix. After calling `make()`, properties like `modules`, `moduleCount`, `typeNumber`, and `isMaked` become available. ```javascript var qr = new UQRCode(); qr.data = "https://uqrcode.cn/doc"; qr.size = 200; qr.errorCorrectLevel = UQRCode.errorCorrectLevel.H; // 调用make()生成二维码矩阵 qr.make(); // make()后可访问以下属性 console.log(qr.modules); // 二维码模块矩阵数据 console.log(qr.moduleCount); // 模块数量(行/列数) console.log(qr.typeNumber); // 二维码版本号(1-40) console.log(qr.isMaked); // 是否已生成: true ``` -------------------------------- ### Import uQRCode in Javascript (npm) Source: https://github.com/sansnn/uqrcode/blob/main/publish/npm/uqrcodejs/README.md Demonstrates how to import the uQRCode library in Javascript projects after installation via npm. Supports both ES6 import and CommonJS require syntax. ```javascript // npm安装 import UQRCode from 'uqrcodejs'; // npm install uqrcodejs // 或者 import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js ``` ```javascript // npm安装 const UQRCode = require('uqrcodejs'); // npm install uqrcodejs // 或者 const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js ``` -------------------------------- ### Export QR Code as Temporary File Path using Canvas2D Source: https://github.com/sansnn/uqrcode/blob/main/publish/npm/uqrcodejs/README.md This example demonstrates how to obtain QR code data in different formats using the Canvas2D API. It shows how to get the QR code as a Base64 encoded string or as a Buffer. This is useful for further processing or displaying the QR code. ```javascript // 得到base64 console.log(canvas.toDataURL()); // 得到buffer console.log(canvas.toBuffer()); ``` -------------------------------- ### Install uQRCode using npm Source: https://github.com/sansnn/uqrcode/blob/main/README.md Install the uQRCode library using npm. This allows you to import or require the library in your project for use. ```bash # npm install npm install uqrcodejs # or npm install @uqrcode/js ``` -------------------------------- ### Native UQRCode Usage with Liquid Style Source: https://github.com/sansnn/uqrcode/blob/main/plugin/liquid/README.md Provides a comprehensive example of using the UQRCode library with the liquid style extension. It covers setting QR code data, size, margin, registering the plugin, setting extension-specific properties like `foregroundRadius`, and finally making and drawing the QR code to a canvas context. ```javascript // 获取uQRCode实例 var qr = new UQRCode(); // 设置uQRCode属性 qr.data = 'https://uqrcode.cn/doc'; // 指定二维码对应内容 qr.size = 220; // 指定要生成的二维码大小 qr.margin = 10; // 指定二维码的边距 // 注册扩展 qr.register(UQRCodePluginLiquid); // 设置扩展属性 qr.foregroundRadius = 1.0; // 调用制作二维码方法 qr.make(); // 设置uQRCode实例的canvas上下文 qr.canvasContext = canvasContext; // 调用扩展绘制方法将二维码图案绘制到canvas上 qr.drawLiquidCanvas(); ``` -------------------------------- ### Generating a Liquid Style QR Code (Native) Source: https://github.com/sansnn/uqrcode/blob/main/dist/plugin/liquid/README.md Provides a comprehensive example of generating a liquid-style QR code using the uQRCode library and its liquid plugin in a native JavaScript environment. It covers setting QR code data, size, margin, registering the plugin, configuring extension properties, and drawing the QR code to a canvas context. ```javascript // Get uQRCode instance var qr = new UQRCode(); // Set uQRCode properties qr.data = 'https://uqrcode.cn/doc'; // Specify QR code content qr.size = 220; // Specify QR code size qr.margin = 10; // Specify QR code margin // Register extension qr.register(UQRCodePluginLiquid); // Set extension properties qr.foregroundRadius = 1.0; // Call make QR code method qr.make(); // Set uQRCode instance's canvas context qr.canvasContext = canvasContext; // Call extension draw method to draw QR code pattern to canvas qr.drawLiquidCanvas(); ``` -------------------------------- ### Get QR Code Modules for Custom Rendering Source: https://context7.com/sansnn/uqrcode/llms.txt This example shows how to retrieve an array of drawing modules using `getDrawModules()`. This array can be used for custom rendering methods like DOM or SVG. The snippet also includes an example of using this data to render the QR code using HTML divs and an image for the logo. ```javascript var qr = new UQRCode(); qr.data = "https://uqrcode.cn/doc"; qr.size = 200; qr.foregroundImageSrc = "logo.png"; // 设置Logo qr.make(); var drawModules = qr.getDrawModules(); // 返回数组示例: // [ // { name: "area", type: "area", color: "#FFFFFF", x: 0, y: 0, width: 200, height: 200 }, // { name: "foreground", type: "tile", color: "#000000", x: 10, y: 10, width: 8, height: 8, rowIndex: 0, colIndex: 0 }, // { name: "background", type: "tile", color: "#FFFFFF", x: 18, y: 10, width: 8, height: 8, rowIndex: 0, colIndex: 1 }, // { name: "foregroundImage", type: "image", imageSrc: "logo.png", x: 75, y: 75, width: 50, height: 50 } // ] // 使用DOM方式渲染 var qrHtml = ''; for (var i = 0; i < drawModules.length; i++) { var module = drawModules[i]; if (module.type === 'tile') { qrHtml += `
`; } else if (module.type === 'image') { qrHtml += ``; } } document.getElementById('qrcode').innerHTML = qrHtml; ``` -------------------------------- ### Import uQRCode in Javascript (npm) Source: https://github.com/sansnn/uqrcode/blob/main/publish/npm/@uqrcode/uni-app/README.md Import the uQRCode library into your Javascript project after installing it via npm. This example shows how to import using ES6 modules or CommonJS for Node.js. ```javascript // npm install uqrcodejs import UQRCode from 'uqrcodejs'; // or // npm install @uqrcode/js import UQRCode from '@uqrcode/js'; ``` ```javascript // npm installation const UQRCode = require('uqrcodejs'); // npm install uqrcodejs // or const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js'; ``` -------------------------------- ### Initialize and Configure uQRCode Source: https://github.com/sansnn/uqrcode/blob/main/test/html/index.html This snippet demonstrates how to initialize the uQRCode library, set various properties for the QR code such as data, size, margin, colors, and a foreground image. It also includes a custom method to load images asynchronously. ```javascript // Introduce uQRCode const UQRCode = window.UQRCode; // Subsequent drawing of images requires setting up an image loading method UQRCode.prototype.loadImage = function(src) { return new Promise((resolve, reject) => { var img = new Image(); img.src = src; img.onload = function() { resolve(img); } img.onerror = err => { reject(err); } }); } // Get a uQRCode instance var qr = new UQRCode(); // Set uQRCode properties qr.data = 'uQRCode'; qr.size = 200; qr.margin = 10; qr.useDynamicSize = true; qr.areaColor = 'rgba(0, 136, 0, 0.1)'; qr.foregroundColor = '#008800'; qr.foregroundImageSrc = 'data:image/png;base64,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'; qr.foregroundImageBackgroundColor = 'rgba(0,0,0,0)'; ``` -------------------------------- ### Configure UQRCode with setOptions Source: https://context7.com/sansnn/uqrcode/llms.txt This snippet illustrates using the `setOptions` method to configure a UQRCode instance. It shows various options including data, size, margin, error correction level, colors, logo, background image, and positioning probe styles. The `make()` method is called afterward to generate the QR code. ```javascript var qr = new UQRCode(); qr.setOptions({ data: "https://uqrcode.cn/doc", // 二维码内容 size: 200, // 二维码尺寸 margin: 10, // 边距 errorCorrectLevel: UQRCode.errorCorrectLevel.H, // 容错级别: L/M/Q/H foregroundColor: "#000000", // 前景色(码点颜色) backgroundColor: "#FFFFFF", // 背景色 foregroundImageSrc: "logo.png", // 中心Logo图片 foregroundImageWidth: 50, // Logo宽度 foregroundImageHeight: 50, // Logo高度 foregroundImagePadding: 5, // Logo内边距 foregroundImageBorderRadius: 10, // Logo圆角 foregroundImageBackgroundColor: "#FFFFFF", // Logo背景色 backgroundImageSrc: "bg.png", // 背景图片 positionProbeBackgroundColor: "#FFFFFF", // 定位点背景色 positionProbeForegroundColor: "#000000" // 定位点前景色 }); qr.make(); ``` -------------------------------- ### Loading UQRCode Liquid Plugin in Browser Source: https://github.com/sansnn/uqrcode/blob/main/plugin/liquid/README.md Illustrates how to load the UQRCode Liquid Plugin in a native browser environment using a script tag. The plugin is added to the `window` object for global access. ```html ``` -------------------------------- ### Import uQRCode in Javascript (npm) Source: https://github.com/sansnn/uqrcode/blob/main/README.md Import the uQRCode library into your Javascript project after installing it via npm. This enables you to use the UQRCode class. ```javascript // npm install uqrcodejs import UQRCode from 'uqrcodejs'; // or // npm install @uqrcode/js import UQRCode from '@uqrcode/js'; ``` -------------------------------- ### Registering uQRCode Liquid Plugin (Global/Instance) Source: https://github.com/sansnn/uqrcode/blob/main/test/uni-app/src/plugins/uqrcode/liquid/README.md Illustrates two methods for registering the uQRCode Liquid Style Extension: globally using `UQRCode.use()` or on a specific instance using `qr.register()`. Global registration makes the plugin available to all uQRCode instances, while instance registration limits its scope. ```javascript UQRCode.use(UQRCodePluginLiquid); ``` ```javascript const qr = new UQRCode(); qr.register(UQRCodePluginLiquid); ``` -------------------------------- ### Import uQRCode in Node.js (npm) Source: https://github.com/sansnn/uqrcode/blob/main/README.md Require the uQRCode library in your Node.js application after installing it via npm. This makes the UQRCode class available for use. ```javascript // npm install uqrcodejs const UQRCode = require('uqrcodejs'); // or // npm install @uqrcode/js const UQRCode = require('@uqrcode/js'); ``` -------------------------------- ### Include uQRCode in Browser Environment Source: https://context7.com/sansnn/uqrcode/llms.txt Shows how to include the uQRCode library in a browser environment using a script tag. It also demonstrates how to access the UQRCode object from the window object. ```html ``` -------------------------------- ### Import uQRCode in Javascript projects Source: https://github.com/sansnn/uqrcode/blob/main/test/uni-app/src/uni_modules/Sansnn-uQRCode/README.md Import the uQRCode library into your Javascript project using ES6 import statements. This is the standard way to include the library after npm installation. ```javascript // npm安装 import UQRCode from 'uqrcodejs'; // npm install uqrcodejs // 或者 import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js ``` -------------------------------- ### Globally Register UQRCode Plugins Source: https://context7.com/sansnn/uqrcode/llms.txt The `UQRCode.use(plugin)` method allows for global registration of plugins, making their functionality available to all UQRCode instances. This is ideal for extending the library's capabilities with features like custom drawing styles. ```javascript import UQRCode from 'uqrcodejs'; import UQRCodePluginRound from 'uqrcode.plugin.round.es.js'; import UQRCodePluginLiquid from 'uqrcode.plugin.liquid.es.js'; // 全局注册圆点码插件 UQRCode.use(UQRCodePluginRound); // 全局注册液态码插件 UQRCode.use(UQRCodePluginLiquid); // 之后所有实例都可以使用插件方法 var qr = new UQRCode({ data: "https://uqrcode.cn/doc", size: 200 }); qr.foregroundRadius = 1.0; // 设置圆角半径 qr.make(); qr.canvasContext = ctx; qr.drawRoundCanvas(); // 使用圆点码绘制方法 ``` -------------------------------- ### Importing uQRCode Liquid Plugin (JavaScript/Node.js) Source: https://github.com/sansnn/uqrcode/blob/main/test/uni-app/src/plugins/uqrcode/liquid/README.md Demonstrates how to import the uQRCode Liquid Style Extension using `import` for ES modules and `require` for Node.js environments. Ensure the correct file path for the plugin is used. ```javascript import UQRCodePluginLiquid from 'uqrcode.plugin.liquid.es.js'; ``` ```javascript const UQRCodePluginLiquid = require('uqrcode.plugin.liquid.cjs.js'); ``` -------------------------------- ### Registering UQRCode Liquid Plugin per Instance Source: https://github.com/sansnn/uqrcode/blob/main/plugin/liquid/README.md Demonstrates how to register the UQRCode Liquid Plugin to a specific UQRCode instance. This approach is useful when you need to apply the liquid style to only certain QR codes. ```javascript const qr = new UQRCode(); qr.register(UQRCodePluginLiquid); ``` -------------------------------- ### Generate QR Code using Canvas API (uni-app) Source: https://github.com/sansnn/uqrcode/blob/main/README.md Generate a QR code using the Canvas API within a uni-app application. This example demonstrates setting up the canvas and drawing the QR code using uni.createCanvasContext. ```html ``` ```javascript onReady() { // Get uQRCode instance var qr = new UQRCode(); // Set QR code content qr.data = "https://uqrcode.cn/doc"; // Set QR code size, must match canvas width/height qr.size = 200; // Make the QR code qr.make(); // Get canvas context (pass 'this' if using components) var canvasContext = uni.createCanvasContext('qrcode', this); // Set uQRCode instance's canvas context qr.canvasContext = canvasContext; // Draw the QR code on the canvas qr.drawCanvas(); } ```