main.js

import { createApp } from 'alpinejs';

window.onload = function () {
 const app = createApp('text-to-image');
 app.plugin(IntersectionObserver);
 app.mount('#app');
}

const app = {
 data() {
    return {
      text: '',
      fontFamily: 'Arial',
      backgroundType: 'Solid',
      bgColor: '#fff',
      graphicElements: 'None',
      customImage: null,
      ready: false
    };
 },
 methods: {
    onReady() {
      this.ready = true;
    },
    createImage() {
      const data = {
        text: this.text,
        fontFamily: this.fontFamily,
        backgroundType: this.backgroundType,
        bgColor: this.bgColor,
        graphicElements: this.graphicElements
      };
      if (this.backgroundType === 'Image' && this.customImage) {
        data.customImage = this.customImage;
      }
      this.result = data;
      this.downloadBtn.disabled = false;
    },
    downloadImage() {
      const link = document.createElement('a');
      link.setAttribute('href', '{{ "/images/example.png" }}');
      link.setAttribute('download', 'image.png');
      link.dispatchEvent(new MouseEvent('click'));
    }
 }
};

const preview = {
 data() {
    return {
      image: null
    };
 },
 methods: {
    onIntersection(entries) {
      const { isIntersecting } = entries[0];
      if (!isIntersecting) {
        return;
      }
      this.createImage();
    },
    createImage() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const width = 500;
      const height = 500;
      canvas.width = width;
      canvas.height = height;
      const image = new Image();
      image.onload = () => {
        ctx.drawImage(image, 0, 0, width, height);
        const dataURL = canvas.toDataURL('image/png');
        this.image = URL.createObjectURL(dataURL);
        this.$el.setAttribute('src', dataURL);
      };
      image.src = '{{ "/images/example.png" }}';
    }
 }
};

const appInstance = app.createApp(app);
const previewInstance = app.createApp(preview);

appInstance.mount('#app');
previewInstance.mount('#preview');