Actualmente tengo una herramienta para configurar que permite al usuario cargar una imagen y luego colocar texto personalizado sobre ella que se muestra y se puede editar en el navegador. Mi pregunta es, usando VueJS, ¿es posible guardar la imagen y el texto como un jpg/png separado, etc., de la misma manera que se aplanarían las capas en Photoshop?
Si ayuda, así es como estoy mostrando el texto en la imagen:
<v-img ref="image" class="mb-5" max-width="700px" @load="updateImageHeight" :src="imgUrl" style="margin: 0 auto;"> <div class="row text-center"> <div class="col-12 text-center"> <div v-for="input in textInputs" :key="input.id" :style="{position: 'absolute', left:input.left+'px', top: input.top+'px'}">{{ input.text }}</div> </div> </div> </v-img>Si es posible, ¿existen recursos para ayudarme a comenzar? ¿O simplemente no es posible con Vuejs?
Puede usar html2canvas para convertir html en imagen. Además, ya existe este mixin html2canvas .