a/qr-generator
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

feat: add colors

تصفح المصدر
هذا الالتزام موجود في:
muath-ye
2024-09-16 14:16:32 +03:00
الأصل cd94977d23
التزام 4579f128ff
2 ملفات معدلة مع 44 إضافات و25 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

16
index.html
عرض الملف

@@ -43,9 +43,19 @@
Powered by <a href="https://muathye.com" target="_blank"
class="text-blue-500 hover:underline">muathye.com</a>
</p>
<input type="text" id="text-input"
class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="Enter text to generate QR code">
<textarea id="text-input" class="w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text to generate QR code"></textarea>
<!-- Color Pickers -->
<div class="mb-4 flex items-center space-x-4">
<div class="flex">
<label for="foreground-color" class="inilne mr-1 text-gray-700">Foreground Color:</label>
<input type="color" id="foreground-color" value="#000000" class="inline p-1 border border-gray-300 rounded">
</div>
<div class="flex">
<label for="background-color" class="inilne mr-1 text-gray-700">Background Color:</label>
<input type="color" id="background-color" value="#FFFFFF" class="inline p-1 border border-gray-300 rounded">
</div>
</div>
<button id="generate-btn"
class="text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-medium rounded-lg text-sm px-5 py-2.5 text-center me-2 mb-2 w-full mb-4">Generate
QR Code</button>

53
script.js
عرض الملف

@@ -2,13 +2,22 @@ document.getElementById('generate-btn').addEventListener('click', () => {
const text = document.getElementById('text-input').value;
const canvas = document.getElementById('qr-code');
const downloadButtons = document.getElementById('download-buttons');
const foregroundColor = document.getElementById('foreground-color').value;
const backgroundColor = document.getElementById('background-color').value;
if (text) {
QRCode.toCanvas(canvas, text, function (error) {
// First, draw the basic QR code
QRCode.toCanvas(canvas, text, {
color: {
dark: foregroundColor,
light: backgroundColor
}
}, function (error) {
if (error) {
console.error(error);
return;
}
console.log('QR code generated!');
downloadButtons.classList.remove('hidden'); // Show download buttons
});
@@ -18,8 +27,18 @@ document.getElementById('generate-btn').addEventListener('click', () => {
// Download QR Code as SVG
document.getElementById('download-svg').addEventListener('click', () => {
const text = document.getElementById('text-input').value;
const foregroundColor = document.getElementById('foreground-color').value;
const backgroundColor = document.getElementById('background-color').value;
const options = {
color: {
dark: foregroundColor,
light: backgroundColor
}
};
if (text) {
QRCode.toString(text, { type: 'svg' }, function (error, svg) {
QRCode.toString(text, { type: 'svg', color: options.color }, function (error, svg) {
if (error) {
console.error(error);
return;
@@ -39,25 +58,15 @@ document.getElementById('download-svg').addEventListener('click', () => {
// Download QR Code as PNG
document.getElementById('download-png').addEventListener('click', () => {
const text = document.getElementById('text-input').value;
const canvas = document.getElementById('qr-code');
if (text) {
QRCode.toCanvas(canvas, text, function (error) {
if (error) {
console.error(error);
return;
}
canvas.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'qrcode.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}, 'image/png');
});
}
canvas.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'qrcode.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
}, 'image/png');
});