### Installing qr-code-styling with npm (Shell)
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
Command-line instruction to install the `qr-code-styling` library using the npm package manager. This is the standard way to add the library as a dependency to a project. Requires Node.js and npm installed on the system.
```Shell
npm install qr-code-styling
```
--------------------------------
### Basic QR Code Generation in HTML (HTML)
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
Demonstrates how to include the `qr-code-styling` library via CDN in an HTML file, create a new `QRCodeStyling` instance with various styling options (size, type, data, image, colors, margins), append it to a DOM element, and download it. Requires an HTML file and a browser environment.
```HTML
QR Code Styling
```
--------------------------------
### Generating Canvas QR Code in Node.js
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
This snippet shows how to create a QR code instance configured for canvas output in Node.js using `qr-code-styling`. It requires the `JSDOM` and `nodeCanvas` objects to be passed to the constructor. The `getRawData` method is used to obtain a buffer of the generated image (in this case PNG), which is then saved to a file (`test.png`) using the `fs` module. Prerequisites include requiring `qr-code-styling/lib/qr-code-styling.common.js`, `canvas`, `jsdom`, and `fs`, along with defining the `options` object.
```JavaScript
// For canvas type
const qrCodeImage = new QRCodeStyling({
jsdom: JSDOM, // this is required
nodeCanvas, // this is required,
...options,
imageOptions: {
saveAsBlob: true,
crossOrigin: "anonymous",
margin: 20
}
});
qrCodeImage.getRawData("png").then((buffer) => {
fs.writeFileSync("test.png", buffer);
});
```
--------------------------------
### Generating SVG QR Code in Node.js
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
This snippet demonstrates creating a QR code instance configured for SVG output in Node.js using `qr-code-styling`. It requires the `JSDOM` object to be passed to the constructor and sets the `type` to 'svg'. The `getRawData` method is used to obtain a buffer of the generated SVG code, which is then saved to a file (`test.svg`) using the `fs` module. Prerequisites include requiring `qr-code-styling/lib/qr-code-styling.common.js`, `jsdom`, and `fs`, along with defining the `options` object.
```JavaScript
// For svg type
const qrCodeSvg = new QRCodeStyling({
jsdom: JSDOM, // this is required
type: "svg",
...options
});
qrCodeSvg.getRawData("svg").then((buffer) => {
fs.writeFileSync("test.svg", buffer);
});
```
--------------------------------
### Applying Custom SVG Extension - JavaScript
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
This snippet demonstrates how to use the `applyExtension` method to programmatically modify the generated SVG QR code. It shows a function that takes the SVG element and the current options as arguments and appends a styled rectangle element to create a border around the QR code.
```JavaScript
const extension = (svg, options) => {
const { width, height } = options;
const size = Math.min(width, height);
const border = document.createElementNS("http://www.w3.org/2000/svg", "rect");
const borderAttributes = {
"fill": "none",
"x": (width - size + 40) / 2,
"y": (height - size + 40) / 2,
"width": size - 40,
"height": size - 40,
"stroke": 'black',
"stroke-width": 40,
"rx": 100,
};
Object.keys(borderAttributes).forEach(attribute => {
border.setAttribute(attribute, borderAttributes[attribute]);
});
svg.appendChild(border);
};
```
--------------------------------
### Generating SVG QR Code (Image as Blob) in Node.js
Source: https://github.com/kozakdenys/qr-code-styling/blob/master/README.md
This snippet shows how to create an SVG QR code in Node.js where the embedded inner image is saved as a data URL (blob). This specific configuration requires both `JSDOM` and `nodeCanvas` to be passed to the constructor, in addition to setting `type` to 'svg' and `imageOptions.saveAsBlob` to `true`. The generated SVG buffer is saved to a file (`test_blob.svg`) using the `fs` module. Prerequisites include requiring `qr-code-styling/lib/qr-code-styling.common.js`, `canvas`, `jsdom`, and `fs`, along with defining the `options` object.
```JavaScript
// For svg type with the inner-image saved as a blob
// (inner-image will render in more places but file will be larger)
const qrCodeSvgWithBlobImage = new QRCodeStyling({
jsdom: JSDOM, // this is required
nodeCanvas, // this is required
type: "svg",
...options,
imageOptions: {
saveAsBlob: true,
crossOrigin: "anonymous",
margin: 20
}
});
qrCodeSvgWithBlobImage.getRawData("svg").then((buffer) => {
fs.writeFileSync("test_blob.svg", buffer);
});
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.