Necesito agregar una función en mi aplicación que permita a los usuarios guardar, como una imagen, en sus documentos fotográficos en el dispositivo, una parte de la aplicación.
Estoy usando Nuxt.js y el contenido está dentro de un cuadro de diálogo, así de simple:
<v-card ref="print" outlined class="certificate"> <v-img :src="photo.url"></v-img> <v-card-text> {{ photo.title }} </v-card-text> </v-card>La imagen src está en almacenamiento externo, no en mis activos, ofc...
El código para generar el archivo a guardar es el siguiente:
const el = this.$refs.print const options = { type: 'dataURL', useCors: true, scale: 2, logging: false, } try { const canvas = await this.$html2canvas(el, options) await Filesystem.writeFile({ path: `certificate-${this.photo.id}.jpeg`, data: canvas, directory: Directory.Documents, }) } catch (error) { // ... }Funciona, obtiene la porción correcta de HTML y guarda un Jpeg en mis Documentos, desafortunadamente, las imágenes dentro siempre son totalmente negras...
¿¿¿Por qué??? ¿Cómo puedo arreglar esto?
No proporciona ninguna opción de encoding a Filesystem.writeFile() y, por lo tanto, se guarda como codificado en base64 de forma predeterminada. El elemento canvas de HTML no está codificado en base64.