En mi Nuxt PWA tengo una función que convierte mi HTML a Canvas usando este paquete . La imagen generada está en la base 64. Ahora quiero poder compartir esa imagen a través de: Whatsapp, Facebook, correo electrónico, Instagram, etc. He encontrado varios paquetes, pero no parece que todos admitan compartir archivos, solo URL y texto.
Esta es mi función de compartir:
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, }) } }) Cuando elimino la condición if (navigator.share) , aparece un error en mi consola que indica que navigator.share no es una función. Leí en alguna parte que solo funciona en HTTPS, así que lo subí a mi servidor de prueba y lo intenté, pero aún recibí el mismo error.
Para que quede claro, quiero poder compartir la imagen generada en sí y no una URL.
Tengo una variación del código a continuación en una función share() en una aplicación mía y funciona bien si se ejecuta en el cliente.
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); } }); };Dime si esta URL te funciona: https://nuxt-share-social-media.netlify.app
Si es así, puede encontrar el repositorio de Github aquí: https://github.com/kissu/so-share-image-bounty
el codigo es
<template> <div> <div id="capture" ref="element" style="padding: 10px; background: #f5da55"> <h4 style="color: #000">Hello world!</h4> </div> <br /> <br /> <button @click="share">share please</button> </div> </template> <script> import html2canvas from 'html2canvas' export default { methods: { share() { // iife here ;(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(this.$refs.element) 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) } }) })() }, }, } </script>¡Inspirado en @denvercoder9!
method !async faltante porque ESlint y en caso de que quisieras hacer algo después$refs porque así es como debes seleccionar partes específicas del DOM en el ecosistema Vuev91 ), ¡funciona perfectamente bien!Esta es mi experiencia para los navegadores (probado en el ejemplo de MDN y en mi aplicación, exactamente los mismos resultados)
| donde | trabajando |
|---|---|
| iPad cromo | sí |
| iPad firefox | sí |
| safari con ipad | sí |
| ventanas cromadas | sí |
| ventanas firefox | no |
| android cromo | sí |
| android firefox | no |
| escritorio linux cromo | no |
| escritorio linux firefox | no |
Para mí, esta era una función solo para dispositivos móviles (como para Android). Pero parece que incluso algunos navegadores de escritorio también están manejando esto. Debo admitir que me sorprendió mucho ver que este funcionaba en Windows.
Aquí hay una publicación interesante de Google que correlaciona esta compatibilidad: https://web.dev/web-share/#browser-support
Leyendo MDN de nuevo, dice
El método navigator.share() de Web Share API invoca el mecanismo de uso compartido nativo del dispositivo.
Entonces, supongo que el "dispositivo (de escritorio)" en su mayoría no es compatible con Share API.
TLDR: esto funciona totalmente según lo previsto, pero la compatibilidad es realmente inferior hasta ahora.