ROYALISTE FIDEL/الله الوطن الملك

تحويل الصور إلى JavaScript يعني عادةً تحويلها إلى صيغة Base64 (سلسلة نصية طويلة) ليتم تضمينها مباشرة داخل ملفات السكريبت دون الحاجة لتحميل ملف صورة خارجي. هذا مفيد جداً لمبرمجي الألعاب، مطوري إضافات المتصفح، أو عند رغبتك في تقليل عدد طلبات HTTP في موقعك.

إليك سكريبت احترافي وشامل يمكنك استخدامه كأداة في موقعك أو مدونتك (مثل بلوجر) لتحويل أي صورة إلى كود JavaScript جاهز.

سكريبت "محول الصور إلى JavaScript Base64"

هذا الكود يجمع بين HTML للتنسيق و JavaScript لمعالجة الصورة وتحويلها.

HTML
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to JS Converter</title>
    <style>
        :root {
            --primary: #6366f1;
            --bg: #f8fafc;
        }
        body {
            font-family: 'Segoe UI', Tahoma, sans-serif;
            background-color: var(--bg);
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .converter-card {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            max-width: 700px;
            width: 100%;
        }
        h2 { color: #1e293b; text-align: center; }
        .drop-zone {
            border: 2px dashed #cbd5e1;
            padding: 40px;
            text-align: center;
            border-radius: 10px;
            cursor: pointer;
            margin-bottom: 20px;
            transition: 0.3s;
        }
        .drop-zone:hover { border-color: var(--primary); background: #f5f7ff; }
        #preview {
            max-width: 150px;
            display: none;
            margin: 10px auto;
            border-radius: 8px;
        }
        .output-area {
            position: relative;
            margin-top: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            resize: none;
            box-sizing: border-box;
            background: #1e293b;
            color: #f8fafc;
        }
        .btn-copy {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            font-weight: bold;
            margin-top: 10px;
        }
        .label { font-weight: bold; margin-bottom: 5px; display: block; }
    </style>
</head>
<body>

<div class="converter-card">
    <h2>محول الصور إلى JavaScript 🖼️➡️📜</h2>
    <p style="text-align: center; color: #64748b;">قم بتحويل صورتك إلى متغير JS بصيغة Base64</p>

    <div class="drop-zone" onclick="document.getElementById('fileInput').click()">
        <p id="msg">اسحب الصورة هنا أو اضغط للاختيار</p>
        <input type="file" id="fileInput" accept="image/*" style="display: none;">
        <img id="preview" alt="Preview">
    </div>

    <div class="output-area">
        <span class="label">كود JavaScript الناتج:</span>
        <textarea id="output" readonly placeholder="سيظهر الكود هنا..."></textarea>
        <button class="btn-copy" onclick="copyResult()">نسخ كود JS 📋</button>
    </div>
</div>

<script>
    const fileInput = document.getElementById('fileInput');
    const output = document.getElementById('output');
    const preview = document.getElementById('preview');
    const msg = document.getElementById('msg');

    fileInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        
        reader.onload = function(event) {
            const base64String = event.target.result;
            
            // إنشاء كود جافا سكريبت
            const jsCode = `// صورة محولة: ${file.name}\nconst MY_IMAGE = "${base64String}";\n\n// طريقة الاستخدام:\n// document.getElementById('myImgId').src = MY_IMAGE;`;
            
            output.value = jsCode;
            preview.src = base64String;
            preview.style.display = 'block';
            msg.innerText = `تم تحويل: ${file.name}`;
        };

        reader.readAsDataURL(file);
    });

    function copyResult() {
        output.select();
        document.execCommand('copy');
        alert('تم نسخ الكود بنجاح!');
    }
</script>

</body>
</html>

كيف يعمل السكريبت؟

FileReader API: يستخدم السكريبت واجهة برمجة تطبيقات المتصفح لقراءة ملف الصورة من جهازك محلياً دون رفعه إلى أي خادم.
readAsDataURL: تقوم هذه الدالة بتحويل البيانات الثنائية (Binary) للصورة إلى سلسلة نصية تبدأ بـ data:image/...;base64,.
Variable Generation: يقوم السكريبت بتغليف النص الناتج داخل متغير JavaScript (const MY_IMAGE) ليكون جاهزاً للاستخدام فوراً.

حالات استخدام الصورة المحولة لـ JS:

تضمين الصور في ملفات CSS-in-JS: مثل استخدامها في React أو Vue.
إضافات المتصفح (Extensions): حيث يفضل تضمين الأيقونات داخل السكريبت لضمان سرعة التحميل.
حماية الصور: تصبح الصورة جزءاً من الكود البرمجي مما يجعل تحميلها المباشر "كصورة" أصعب قليلاً للمستخدم العادي.

نصيحة SEO والأداء:

تجنب تحويل الصور الكبيرة جداً (أكثر من 1 ميجابايت) إلى JavaScript، لأن حجم النص الناتج (Base64) يكون أكبر بحوالي 33% من حجم الصورة الأصلية، مما قد يؤدي لبطء في تحميل ملف السكريبت الخاص بموقعك. استخدمها للأيقونات والشعارات الصغيرة فقط.