I have developed a tool that enables users to upload an image and overlay custom text on it, which can be viewed and edited in the browser. My query is whether it is feasible to save the combined image and text as separate files (e.g., jpg/png) using VueJS, similar to flattening layers in Photoshop.
Just for reference, here's how I am currently 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 achieving this is possible, are there any helpful resources available to guide me through the process with VueJS? Or is this functionality simply not achievable using VueJS?