Teilen Sie Bilder über soziale Medien mit PWA

Question

In meiner Nuxt PWA habe ich eine Funktion, die mithilfe dieses Pakets HTML in Canvas konvertiert. Das generierte Bild ist in Basis 64. Jetzt möchte ich das Bild teilen können über: WhatsApp, Facebook, E-Mail, Instagram usw. Ich habe ein paar Pakete gefunden, aber keines davon scheint die gemeinsame Nutzung nur von Datei-URLs und Text zu unterstützen.

Das ist meine Sharing-Funktion:

shareTicket(index) {
  html2canvas(this.$refs['ticket-' + index][0], {
    backgroundColor: '#efefef',
    useCORS: true, // if the contents of screenshots, there are images, there may be a case of cross-domain, add this parameter, the cross-domain file to solve the problem
  }).then((canvas) => {
    let url = canvas.toDataURL('image/png') // finally produced image url

    if (navigator.share) {
      navigator.share({
        title: 'Title to be shared',
        text: 'Text to be shared',
        url: this.url,
      })
    }
  })

Wenn ich herausnehme if (navigator.share) 条件时，我的控制台中出现错误，指出 navigator.share ist das keine Funktion. Ich habe irgendwo gelesen, dass es nur mit HTTPS funktioniert, also habe ich es auf meinen Staging-Server hochgeladen und es ausprobiert, aber immer noch die gleiche Fehlermeldung erhalten.

Um es klarzustellen: Ich möchte das generierte Bild selbst teilen können, nicht die URL.

Answer 1

我的应用程序中的 share() 函数中有以下代码的变体，如果在客户端上执行，它可以正常工作。

const share = async() => {
  if (!('share' in navigator)) {
    return;
  }
  // `element` is the HTML element you want to share.
  // `backgroundColor` is the desired background color.
  const canvas = await html2canvas(element, {
    backgroundColor,
  });
  canvas.toBlob(async (blob) => {
    // Even if you want to share just one file you need to 
    // send them as an array of files.
    const files = [new File([blob], 'image.png', { type: blob.type })];
    const shareData = {
      text: 'Some text',
      title: 'Some title',
      files,
    };
    if (navigator.canShare(shareData)) {
      try {
        await navigator.share(shareData);
      } catch (err) {
        if (err.name !== 'AbortError') {
          console.error(err.name, err.message);      
        }
      }
    } else {
      console.warn('Sharing not supported', shareData);            
    }
  });
};

Answer 2

告诉我这个网址是否适合您：https://nuxt-share-social- media.netlify.app
如果是这样，您可以在此处找到 Github 存储库： https://github.com/ Kissu/so-share-image-bounty

代码是

灵感来自@denvercoder9！