I currently have an tool to set up which allows the user to upload an image, and then place custom text over it which displays and is editable in the browser. My question is, using VueJS, is it possible to save the image and the text as a separate jpg/png etc, much the same way one would flatten layers in photoshop?
If it helps, here's how I'm displaying the text on the image:
<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>
If it is possible, are there any resources out there to help me make a start on it? Or is it just not possible with Vuejs?
You could use the html2canvas to convert html to image. Also, there is already this mixin html2canvas.