https://gv-lastfm-playground.vercel.app/js/Sharing.js

1const dataURLtoFile = (dataurl, filename) => {
2  var arr = dataurl.split(","),
3    mimeType = arr[0].match(/:(.*?);/)[1],
4    decodedData = atob(arr[1]),
5    lengthOfDecodedData = decodedData.length,
6    u8array = new Uint8Array(lengthOfDecodedData);
7  while (lengthOfDecodedData--) {
8    u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData);
9  }
10  return new File([u8array], filename, {type: mimeType});
11};
12
13const shareFile = async (id, title) => {
14  const loadingElements = event.target
15    .closest("button")
16    .querySelector(".loading");
17  const notLoadingElements = event.target
18    .closest("button")
19    .querySelector(".not-loading");
20  loadingElements.classList.remove("hide");
21  notLoadingElements.classList.add("hide");
22
23  await htmlToImage.toPng(document.getElementById(id), {
24    style: {transform: "scale(1)"},
25    pixelRatio: 1,
26  });
27  await htmlToImage.toPng(document.getElementById(id), {
28    style: {transform: "scale(1)"},
29    pixelRatio: 1,
30  });
31  await htmlToImage.toPng(document.getElementById(id), {
32    style: {transform: "scale(1)"},
33    pixelRatio: 1,
34  });
35
36  const dataUrl = await htmlToImage.toPng(document.getElementById(id), {
37    style: {transform: "scale(1)"},
38    pixelRatio: 1,
39  });
40  const file = dataURLtoFile(dataUrl, title);
41  const isMobile =
42    /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(
43      navigator.userAgent
44    );
45  if (isMobile && navigator.canShare && navigator.canShare({files: [file]})) {
46    try {
47      await navigator.share({
48        files: [file],
49        title,
50      });
51    } catch (error) {
52      console.log("Sharing failed", error);
53    } finally {
54      loadingElements.classList.add("hide");
55      notLoadingElements.classList.remove("hide");
56    }
57  } else {
58    download(dataUrl, title);
59    loadingElements.classList.add("hide");
60    notLoadingElements.classList.remove("hide");
61  }
62};