65 lines
1.5 KiB
TypeScript
65 lines
1.5 KiB
TypeScript
import { Axios } from './PhpApi';
|
|
|
|
import React from 'react'
|
|
import QRCodeStyling from 'qr-code-styling';
|
|
|
|
|
|
const upload = (file: File): Promise<any> =>
|
|
{
|
|
let formData = new FormData();
|
|
|
|
formData.append("file", file);
|
|
formData.append("submit", "1");
|
|
formData.append("qr", "1");
|
|
|
|
let uploadRes = Axios.post("upload.php", formData, {
|
|
headers:
|
|
{
|
|
"Content-Type": "multipart/form-data",
|
|
}
|
|
});
|
|
|
|
// let a: number = 1+3;
|
|
// a++;
|
|
return uploadRes;
|
|
};
|
|
|
|
export default async function CreateQr({qr_id}:{qr_id: string | undefined})
|
|
{
|
|
const WWW_ROOT: string = process.env.REACT_APP_WWW_ROOT!;
|
|
const qrCode = new QRCodeStyling(
|
|
{
|
|
width: 200,
|
|
height: 200,
|
|
type: 'canvas',
|
|
image: WWW_ROOT + "uploads/glider.png",
|
|
data: WWW_ROOT + qr_id,
|
|
dotsOptions:
|
|
{
|
|
color: "#000",
|
|
type: "square"
|
|
},
|
|
imageOptions:
|
|
{
|
|
crossOrigin: "anonymous",
|
|
margin: 0
|
|
},
|
|
cornersSquareOptions:
|
|
{
|
|
type: "extra-rounded",
|
|
}
|
|
});
|
|
document.getElementById("canvas")!.innerHTML = "";
|
|
qrCode.append(document.getElementById("canvas") as HTMLElement);
|
|
|
|
let qr_el:HTMLCanvasElement = await qrCode._getElement() as unknown as HTMLCanvasElement;
|
|
let file: File;
|
|
|
|
qr_el.toBlob((blob) =>
|
|
{
|
|
file = new File([blob!], 'qr_blob.png', { type: 'image/png' });
|
|
console.log(file);
|
|
upload(file);
|
|
}, 'image/png');
|
|
}
|