110 lines
No EOL
2.7 KiB
JavaScript
110 lines
No EOL
2.7 KiB
JavaScript
const qrcode = new QRCode("qrcode", {
|
|
width: 512,
|
|
height: 512
|
|
});
|
|
const input = document.getElementById('text');
|
|
|
|
function svg_content() {
|
|
const svg = document.querySelector('#qrcode svg');
|
|
svg.setAttribute('width',512);
|
|
svg.setAttribute('height',512);
|
|
svg.setAttribute('xmlns','http://www.w3.org/2000/svg');
|
|
const content = `<?xml version="1.0" ?>`+svg.outerHTML;
|
|
return content;
|
|
}
|
|
|
|
async function set_png_link() {
|
|
const blob = await png_blob();
|
|
}
|
|
|
|
let png_blob;
|
|
let svg_blob;
|
|
|
|
async function go() {
|
|
qrcode.makeCode(input.value);
|
|
|
|
|
|
const basename = input.value.replace(/\W+/g,'-');
|
|
function set_link(a, url, extension) {
|
|
a.setAttribute('href', url);
|
|
a.setAttribute('target','_blank');
|
|
a.setAttribute('download', `${basename}.${extension}`);
|
|
}
|
|
|
|
|
|
const content = svg_content();
|
|
svg_blob = new Blob([content],{type: 'image/svg+xml'});
|
|
const a_svg = document.getElementById('download-svg');
|
|
const svg_url = URL.createObjectURL(svg_blob);
|
|
|
|
set_link(document.getElementById('download-svg'), svg_url, 'svg');
|
|
|
|
const px = Math.max(3000, 10 * qrcode._oQRCode.getModuleCount());
|
|
const img = new Image();
|
|
const canvas = new OffscreenCanvas(px, px);
|
|
canvas.width = canvas.height = px;
|
|
const ctx = canvas.getContext('2d');
|
|
const promise = new Promise(async (resolve) => {
|
|
img.addEventListener('load', async () => {
|
|
canvas.getContext('2d').drawImage(img, 0, 0, px, px);
|
|
const blob = await canvas.convertToBlob();
|
|
resolve(blob);
|
|
},{once:true});
|
|
|
|
})
|
|
|
|
img.src = svg_url;
|
|
|
|
png_blob = await promise;
|
|
const png_url = URL.createObjectURL(png_blob);
|
|
set_link(document.getElementById('download-png'), png_url, 'png');
|
|
}
|
|
|
|
input.addEventListener('change', e => {
|
|
go();
|
|
})
|
|
|
|
input.addEventListener('input', e => {
|
|
go();
|
|
})
|
|
|
|
async function writeClipImg() {
|
|
try {
|
|
if (ClipboardItem.supports("image/svg+xml")) {
|
|
const imgURL = "/my-image.svg";
|
|
const data = await fetch(imgURL);
|
|
const blob = await data.blob();
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({
|
|
[blob.type]: blob,
|
|
}),
|
|
]);
|
|
console.log("Fetched image copied.");
|
|
} else {
|
|
console.log("SVG images are not supported by the clipboard.");
|
|
}
|
|
} catch (err) {
|
|
console.error(err.name, err.message);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
document.getElementById('copy-to-clipboard-png').addEventListener('click',async () => {
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({
|
|
[png_blob.type]: png_blob,
|
|
})
|
|
]);
|
|
})
|
|
|
|
document.getElementById('copy-to-clipboard-svg').addEventListener('click',async () => {
|
|
const content = svg_content();
|
|
try {
|
|
await navigator.clipboard.writeText(content);
|
|
} catch (error) {
|
|
console.error(error.message);
|
|
}
|
|
})
|
|
|
|
go(); |