Trigger download / copy from seperate buttons?

[jakesteele]

Hey,

Is it possible to trigger an event to download or copy in your library? My UI requires a different button then the one generated by the library.

Jake

[Natega]

same

[xuxu-nie]

support a proposal

[Natega]

const imgElement = document.querySelector(".img-qr");

  // Check if the image element exists

  // Create a canvas element to draw the image on
  const canvas = document.createElement("canvas");
  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  const ctx = canvas.getContext("2d");
  ctx.drawImage(imgElement, 0, 0);

  // Convert the canvas content to a data URL

  let dataUrl = canvas.toDataURL(`image/png`);

  if (this.downloadFileFormat === "jpg") {
    dataUrl = canvas.toDataURL(`image/jpeg`);
  }
  if (this.downloadFileFormat === "webp") {
    dataUrl = canvas.toDataURL(`image/webp`);
  }

  // Create a temporary link element
  const link = document.createElement("a");
  link.href = dataUrl;
  link.download = this.options.downloadFileName ?? "my-qr.png";

  // Append the link to the document and trigger a click event to start the download
  document.body.appendChild(link);
  link.click();

  // Remove the link from the document
  document.body.removeChild(link);

[jakesteele]

I managed to get it working using a MutationObserver and a Watch, however it would be nice if you could expose events around the qrCode being rendered if we are expected to create our own solution. The best solution would be we can trigger a download via an event or even just an api.