52 lines
1.1 KiB
HTML
52 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>QR Code Styling</title>
|
|
<script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="canvas"></div>
|
|
<script type="text/javascript">
|
|
|
|
const qrCode = new QRCodeStyling({
|
|
width: 200,
|
|
height: 200,
|
|
type: 'canvas',
|
|
data: "https://hope-fly.de/dog/test__",
|
|
image: "",
|
|
dotsOptions: {
|
|
color: "#000",
|
|
type: "square"
|
|
},
|
|
backgroundOptions: {
|
|
color: "#fff",
|
|
},
|
|
imageOptions: {
|
|
crossOrigin: "anonymous",
|
|
margin: 0
|
|
},
|
|
cornersSquareOptions:
|
|
{
|
|
type: "extra-rounded",
|
|
}
|
|
|
|
});
|
|
|
|
qrCode.append(document.getElementById("canvas"));
|
|
const div_canvas = document.getElementById('canvas');
|
|
const canvas = div_canvas.lastChild;
|
|
|
|
canvas.toBlob((blob) =>
|
|
{
|
|
const file = URL.createObjectURL(blob);
|
|
console.log(blob);
|
|
console.log(file);
|
|
});
|
|
|
|
|
|
|
|
qrCode.download({ name: "qr", extension: "png" });
|
|
</script>
|
|
</body>
|
|
</html> |