Skip to content

Commit 0b3b6ae

Browse files
brown9804brown9804
authored
working on download buttons
1 parent 4068be5 commit 0b3b6ae

File tree

1 file changed

+70
-17
lines changed

1 file changed

+70
-17
lines changed

‎src/script.js‎

Lines changed: 70 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,17 @@ document.getElementById('badgeForm').addEventListener('submit', function(event)
44
});
55

66
document.getElementById('clearButton').addEventListener('click', function() {
7-
// Clear the form and result display
87
document.getElementById('badgeForm').reset();
98
document.getElementById('badgePreview').innerHTML = '';
10-
document.getElementById('regenerateMessage').style.display = 'none'; // Hide the message when form is cleared
11-
document.getElementById('downloadSVGButton').style.display = 'none'; // Hide the download button when form is cleared
12-
document.getElementById('downloadPNGButton').style.display = 'none'; // Hide the download button when form is cleared
9+
document.getElementById('regenerateMessage').style.display = 'none';
10+
document.getElementById('downloadSVGButton').style.display = 'none';
11+
document.getElementById('downloadPNGButton').style.display = 'none';
1312
});
1413

15-
// Function to show the regenerate message
1614
function showRegenerateMessage() {
1715
document.getElementById('regenerateMessage').style.display = 'block';
1816
}
1917

20-
// Add event listeners to all input fields to show the regenerate message when any value is changed
2118
const inputs = document.querySelectorAll('#badgeForm input, #badgeForm select');
2219
inputs.forEach(input => {
2320
input.addEventListener('change', showRegenerateMessage);
@@ -35,14 +32,12 @@ function generateBadge() {
3532

3633
let badgeSVG = `<svg width="${badgeWidth}" height="${badgeHeight}" xmlns="http://www.w3.org/2000/svg">`;
3734

38-
// Background shape
3935
if (shape === 'circle') {
4036
badgeSVG += `<circle cx="${badgeWidth / 2}" cy="${badgeHeight / 2}" r="${Math.min(badgeWidth, badgeHeight) / 2}" fill="${backgroundColor}" stroke="${borderColor}" stroke-width="5"/>`;
4137
} else if (shape === 'square') {
4238
badgeSVG += `<rect x="0" y="0" width="${badgeWidth}" height="${badgeHeight}" fill="${backgroundColor}" stroke="${borderColor}" stroke-width="5" rx="15" ry="15"/>`;
4339
}
4440

45-
// Function to generate random shapes based on text
4641
function generateRandomShapes(text) {
4742
const words = text.split(' ');
4843
const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#A133FF'];
@@ -67,23 +62,40 @@ function generateBadge() {
6762
} else if (word.toLowerCase().includes('high')) {
6863
shapesSVG += `<text x="${randomX}" y="${randomY}" font-size="${randomSize}" fill="${randomColor}" opacity="0.5">📈</text>`;
6964
} else {
70-
// Default to circle if no specific shape is found
7165
shapesSVG += `<circle cx="${randomX}" cy="${randomY}" r="${randomSize / 2}" fill="${randomColor}" opacity="0.5"/>`;
7266
}
7367
});
7468

7569
return shapesSVG;
7670
}
7771

78-
// Generate random shapes based on description and additional text
72+
function generateRandomFigures() {
73+
const colors = ['#FFD700', '#FF4500', '#1E90FF', '#32CD32', '#FF69B4'];
74+
let figuresSVG = '';
75+
76+
for (let i = 0; i < 10; i++) {
77+
const randomColor = colors[Math.floor(Math.random() * colors.length)];
78+
const randomX = Math.random() * badgeWidth;
79+
const randomY = Math.random() * badgeHeight;
80+
const randomSize = Math.random() * 30 + 10;
81+
82+
if (Math.random() > 0.5) {
83+
figuresSVG += `<polygon points="${randomX},${randomY - randomSize} ${randomX + randomSize / 2},${randomY + randomSize / 2} ${randomX - randomSize / 2},${randomY + randomSize / 2}" fill="${randomColor}" opacity="0.5"/>`;
84+
} else {
85+
figuresSVG += `<polygon points="${randomX},${randomY - randomSize} ${randomX + randomSize},${randomY + randomSize} ${randomX - randomSize},${randomY + randomSize}" fill="${randomColor}" opacity="0.5"/>`;
86+
}
87+
}
88+
89+
return figuresSVG;
90+
}
91+
7992
badgeSVG += generateRandomShapes(description);
8093
badgeSVG += generateRandomShapes(additionalText);
94+
badgeSVG += generateRandomFigures();
8195

82-
// Text
8396
badgeSVG += `<text x="${badgeWidth / 2}" y="${badgeHeight / 2}" font-size="24" text-anchor="middle" fill="${textColor}" font-family="Arial" font-weight="bold">${description}</text>`;
8497
badgeSVG += `<text x="${badgeWidth / 2}" y="${badgeHeight / 2 + 40}" font-size="16" text-anchor="middle" fill="${textColor}" font-family="Arial">${additionalText}</text>`;
8598

86-
// Shadow effect
8799
badgeSVG += `<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
88100
<feDropShadow dx="0" dy="0" stdDeviation="5" flood-color="black" flood-opacity="0.5"/>
89101
</filter>`;
@@ -92,9 +104,9 @@ function generateBadge() {
92104
badgeSVG += `</svg>`;
93105

94106
document.getElementById('badgePreview').innerHTML = badgeSVG;
95-
document.getElementById('regenerateMessage').style.display = 'none'; // Hide the message after generating the badge
96-
document.getElementById('downloadSVGButton').style.display = 'block'; // Show the download button after generating the badge
97-
document.getElementById('downloadPNGButton').style.display = 'block'; // Show the download button after generating the badge
107+
document.getElementById('regenerateMessage').style.display = 'none';
108+
document.getElementById('downloadSVGButton').style.display = 'block';
109+
document.getElementById('downloadPNGButton').style.display = 'block';
98110
}
99111

100112
document.getElementById('downloadSVGButton').addEventListener('click', function() {
@@ -140,8 +152,49 @@ document.getElementById('downloadPNGButton').addEventListener('click', function(
140152
img.src = url;
141153
});
142154

143-
// Add a message element to the HTML
144155
document.getElementById('badgeForm').insertAdjacentHTML('beforeend', '<p id="regenerateMessage" style="display:none; color:red;">Please regenerate the badge since parameters have changed.</p>');
145-
// Add download buttons to the HTML
146156
document.getElementById('badgeForm').insertAdjacentHTML('afterend', '<button id="downloadSVGButton" style="display:none;">Download SVG</button>');
147157
document.getElementById('badgeForm').insertAdjacentHTML('afterend', '<button id="downloadPNGButton" style="display:none;">Download PNG</button>');
158+
159+
document.getElementById('downloadSVGButton').addEventListener('click', function() {
160+
const badgeSVG = document.getElementById('badgePreview').innerHTML;
161+
const blob = new Blob([badgeSVG], { type: 'image/svg+xml' });
162+
const url = URL.createObjectURL(blob);
163+
const a = document.createElement('a');
164+
a.href = url;
165+
a.download = 'badge.svg';
166+
document.body.appendChild(a);
167+
a.click();
168+
document.body.removeChild(a);
169+
URL.revokeObjectURL(url);
170+
});
171+
172+
document.getElementById('downloadPNGButton').addEventListener('click', function() {
173+
const badgeSVG = document.getElementById('badgePreview').innerHTML;
174+
const canvas = document.createElement('canvas');
175+
const ctx = canvas.getContext('2d');
176+
const v = new DOMParser().parseFromString(badgeSVG, 'image/svg+xml');
177+
const svgElement = v.documentElement;
178+
179+
canvas.width = svgElement.getAttribute('width');
180+
canvas.height = svgElement.getAttribute('height');
181+
182+
const img = new Image();
183+
const svgBlob = new Blob([badgeSVG], { type: 'image/svg+xml' });
184+
const url = URL.createObjectURL(svgBlob);
185+
186+
img.onload = function() {
187+
ctx.drawImage(img, 0, 0);
188+
URL.revokeObjectURL(url);
189+
190+
const pngUrl = canvas.toDataURL('image/png');
191+
const a = document.createElement('a');
192+
a.href = pngUrl;
193+
a.download = 'badge.png';
194+
document.body.appendChild(a);
195+
a.click();
196+
document.body.removeChild(a);
197+
};
198+
199+
img.src = url;
200+
});

0 commit comments

Comments
 (0)