Garment Mockup Creator
Upload Your Design
Select Garment
/ style.css /
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f3f4f6;
}
.app-container {
width: 90%;
max-width: 1200px;
background: #ffffff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
header {
text-align: center;
margin-bottom: 20px;
}
.tool-selection {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.tool-selection button {
padding: 10px 20px;
border: none;
background-color: #4CAF50;
color: white;
cursor: pointer;
border-radius: 5px;
}
.mockup-preview {
display: flex;
justify-content: center;
margin: 20px 0;
}
#mockupCanvas {
width: 100%;
max-width: 600px;
height: auto;
border: 1px solid #ccc;
}
.export-options {
display: flex;
justify-content: space-around;
}
.export-options button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
cursor: pointer;
border-radius: 5px;
}
// script.js
// Initialize canvas and context for mockup display
const canvas = document.getElementById("mockupCanvas");
const ctx = canvas.getContext("2d");
function openUpload() {
document.getElementById("uploadSection").style.display = "block";
}
function openGarmentSelection() {
document.getElementById("garmentSection").style.display = "block";
}
// Apply uploaded design to the mockup
function applyDesign() {
const file = document.getElementById("designUpload").files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (e) {
const img = new Image();
img.onload = function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
// Garment selection
function selectGarment() {
const garmentType = document.getElementById("garmentType").value;
// Add logic to change garment template on canvas
}
// Export mockup as chosen format
function exportMockup(format) {
const link = document.createElement('a');
link.href = canvas.toDataURL(`image/${format}`);
link.download = `mockup.${format}`;
link.click();
}
// Placeholder for AR Preview functionality
function previewAR() {
alert("AR Preview not implemented yet");
}
Comments
Post a Comment