design
import { fabric } from ‘fabric’;
const canvas = new fabric.Canvas(‘canvas’);
const imageUpload = document.getElementById(‘image-upload’);
const addTextButton = document.getElementById(‘add-text’);
const saveButton = document.getElementById(‘save-design’);
// Load default shirt image
fabric.Image.fromURL(‘https://via.placeholder.com/500×600?text=Shirt+Template’, (img) => {
img.scaleToWidth(500);
img.set({
selectable: false,
evented: false
});
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
originX: ‘left’,
originY: ‘top’,
left: 0,
top: 0
});
});
// Handle image upload
imageUpload.addEventListener(‘change’, (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (event) => {
fabric.Image.fromURL(event.target.result, (img) => {
img.scaleToWidth(200);
img.set({
left: 150,
top: 200,
selectable: true
});
canvas.add(img);
});
};
reader.readAsDataURL(file);
}
});
// Add text to design
addTextButton.addEventListener(‘click’, () => {
const text = new fabric.Textbox(‘Your Text Here’, {
left: 100,
top: 100,
width: 150,
fontSize: 20,
fill: ‘#000000’,
fontFamily: ‘Arial’,
selectable: true
});
canvas.add(text);
});
// Save design
saveButton.addEventListener(‘click’, () => {
const link = document.createElement(‘a’);
link.href = canvas.toDataURL({ format: ‘png’, quality: 1 });
link.download = ‘design.png’;
link.click();
});