Spaces:
Running
Running
File size: 2,079 Bytes
448df8b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
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'); |