Magnet

USA Office

308 Vintage creek dr.
Weddington, NC 28104
USA
(848)-203-1401
info@edge-recruiters.com

INDIA Office

H. No 1-6-6/1 Anupuram, Behind Radhika Movieplex,
Dr. AS Rao Nagar, Hyderabad Telanagana 500062
India
917569963789
info@edge-recruiters.com

document.addEventListener('DOMContentLoaded', function () { const canvas = new fabric.Canvas('customizationCanvas'); const imageUpload = document.getElementById('img_upload'); const customText = document.getElementById('custom_text'); const zoomInBtn = document.getElementById('zoomIn'); const zoomOutBtn = document.getElementById('zoomOut'); const resetBtn = document.getElementById('reset'); // Handle image upload img_upload.addEventListener('change', function (e) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = function (f) { const img = new Image(); img.src = f.target.result; img.onload = function () { const fabricImg = new fabric.Image(img); canvas.add(fabricImg); }; }; reader.readAsDataURL(file); }); // Handle text input custom_text.addEventListener('input', function () { // Remove existing text objects canvas.getObjects().forEach(obj => { if (obj.type === 'text') { canvas.remove(obj); } }); // Add new text const text = new fabric.Text(custom_text.value, { left: 100, top: 100, fontSize: 20, fill: '#000' }); canvas.add(text); }); // Zoom in zoomInBtn.addEventListener('click', function () { const activeObject = canvas.getActiveObject(); if (activeObject) { activeObject.scaleX *= 1.1; activeObject.scaleY *= 1.1; canvas.renderAll(); } }); // Zoom out zoomOutBtn.addEventListener('click', function () { const activeObject = canvas.getActiveObject(); if (activeObject) { activeObject.scaleX /= 1.1; activeObject.scaleY /= 1.1; canvas.renderAll(); } }); // Reset resetBtn.addEventListener('click', function () { const activeObject = canvas.getActiveObject(); if (activeObject) { activeObject.scaleX = 1; activeObject.scaleY = 1; activeObject.set({ left: 0, top: 0 }); canvas.renderAll(); } }); });