hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

createQr

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-13 14:28:52 +01:00
parent 920ad6ffdb
commit 29a0bb18b7
2 changed files with 73 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/qr.html Normal file
View File

@ -0,0 +1,52 @@
<!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>

17
src/services/CreateQr.ts
View File

@ -30,6 +30,7 @@ export default function CreateQr({qr_id}:{qr_id: string | undefined})
{ {
width: 200, width: 200,
height: 200, height: 200,
type: 'canvas',
image: image:
"", "",
data: 'https://hope-fly.de/dog/'+ qr_id, data: 'https://hope-fly.de/dog/'+ qr_id,
@ -42,8 +43,24 @@ export default function CreateQr({qr_id}:{qr_id: string | undefined})
{ {
crossOrigin: "anonymous", crossOrigin: "anonymous",
margin: 0 margin: 0
},
cornersSquareOptions:
{
type: "extra-rounded",
} }
}); });
let canv: any = qrCode._canvas!.getCanvas() as HTMLCanvasElement;
canv.toBlob(({blob}:{blob: Blob | MediaSource}) =>
{
const file = URL.createObjectURL(blob);
console.log(blob);
console.log(file); // this line should be here
},'image/png');
// upload(qrCode._svg as File); // upload(qrCode._svg as File);
console.log(qrCode); console.log(qrCode);
} }