Thursday 22 July 2021

Share Image Via Social Media From PWA

In my Nuxt PWA I have a function that converts my HTML to Canvas using this package The generated image is in base 64. Now I want to be able to share that image via: whatsapp,facebook,email,Instagram etc. I have found several packages but they all don't seem to support sharing files only URLs and Text. I'm stuck right now and need help with this.

This is my share function:

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,
      })
    }
  })

When I take out the if (navigator.share) condition I get an error in my console that navigator.share is not a function. I read somewhere that it only works on HTTPS so I uploaded to my staging server and tried but still got the same error.

Just to be clear I want to be able to share the generated image itself and not a URL.



from Share Image Via Social Media From PWA

No comments:

Post a Comment