first commit

script.js

@@ -0,0 +1,110 @@
+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();